微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)


Posted in Javascript onAugust 22, 2018

一、使用APIwx.chooseImage(OBJECT)

wx.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

OBJECT参数说明:

参数 类型 必填 说明
count Number 最多可以选择的图片张数,默认9
sizeType StringArray original 原图,compressed 压缩图,默认二者都有
sourceType StringArray album 从相册选图,camera 使用相机,默认二者都有
success Function 成功则返回图片的本地文件路径列表 tempFilePaths
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到。

success返回参数说明:

参数 类型 说明 最低版本
tempFilePaths StringArray 图片的本地文件路径列表  
tempFiles ObjectArray 图片的本地文件列表,每一项是一个 File 对象 1.2.0

File 对象结构如下:

字段 类型 说明
path String 本地文件路径
size Number 本地文件大小,单位:B
var util = require('../../utils/util.js')
Page({
 data:{
  src:"../image/pic4.jpg"
 },
 gotoShow: function(){var _this = this
  wx.chooseImage({
   count: 9, // 最多可以选择的图片张数,默认9
   sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
   sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
   success: function(res){
   // success
   console.log(res)
   _this.setData({
    src:res.tempFilePaths
   })
   },
   fail: function() {
   // fail
   },
   complete: function() {
   // complete
   }
  })
 }

二、图片路径进行数据绑定

<view class="container">
 <view>
 <button type="default" bindtap="gotoShow" >点击上传照片</button> 
 </view>
 <view>
 <image class= "show-image" mode="aspectFitf" src="{{src}}"></image>
 </view>
</view>

号外:

1、wx.chooseImage 调用相机或相册

2、<image class= "show-image" mode="aspectFitf" src="{{src}}"></image> 数据绑定

3、js中动态修改文件路径

var _this = this
  wx.chooseImage({
   count: 9, // 最多可以选择的图片张数,默认9
   sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
   sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
   success: function(res){
   // success
   console.log(res)
   _this.setData({
    src:res.tempFilePaths
   })
   },
   fail: function() {
   // fail
   },
   complete: function() {
   // complete
   }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
jquery BS,dialog控件自适应大小
Jul 06 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 #Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 #Javascript
Vue动态获取width的方法
Aug 22 #Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 #Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 #Javascript
Vue之mixin全局的用法详解
Aug 22 #Javascript
React中使用UEditor百度富文本的方法
Aug 22 #Javascript
You might like
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
jquery无缝图片轮播组件封装
2020/11/25 jQuery
小程序实现锚点滑动效果
2019/09/23 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
python人人网登录应用实例
2014/09/26 Python
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python中几种导入模块的方式总结
2017/04/27 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
仓库班组长岗位职责
2013/12/12 职场文书
园林系毕业生求职信
2014/06/23 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫