小程序选择图片音视频的方法chooseMedia

前几天写了一个方法，目的是去更换头像，如微信里的更换头像。

页面如上图，点击后触发事件，打开存放图像的文件，选择想更换的图像。

视图页：

imgUrl是图片所在的路径；

mode是图片的模式；

绑定的点击(tap)，触发的事件名称为changeAvatar

实现：

1、在对应的js中先定义data选项，即初始化的值

data: {

gender: '女',

username: 'xiaoyuer',

imgUrl: "/images/avatar.jpg"

},

**：data选项里面定义的变量名称要和wxml中的标签里的名称要对上，如imgUrl，其在wxml中对应的是{{imaUrl}};

**：data选项中的值可以为空，如需连上数据库的，可以为对象形式的引用，如userinfo.imgurl。

**：新的imgUrl值是通过图片选择后产生的。

2、在***.js中写事件方法

从视图页看出点击图像触发的事件方法为changeAvatar；

注：chooseimage这个API是旧版的，不用了。

这个方法调用了微信开放文档中的API。

在方法中对这个API的参数进行设定：

count：选择的数量，最多9个；

mediaType：文件类型，['image','video']，如为['mix']时，可同时选择图片和视频；

sourceType：来源的类型。album：从相册选择；camera：使用相机拍摄；

maxDuration：限定拍摄的时间，单位秒；

camera：back，使用后置摄像头、front,使用前置摄像头。

3个回调函数：success:成功、fail：失败、complete：完成、结束。

success回调函数的参数：tempFiles和type。

tempFiles的结构属性主要有:

tempFilePath:本地临时文件路径 (本地路径);

size：大小，单位B；

注：tempFile是一个数组array，注意其下标，选一个时为0。

清楚API的参数后，在JS中的内容如下：

changeAvatar: function() {

var that=this;

wx.chooseMedia({

count: 9,

mediaType:['image','video'],

sizeType: ['original', 'compressed'],

sourceType: ['album', 'camera'],

maxDuration: 30,

camera: 'back',

success(res) {

// tempFilePath可以作为img标签的src属性显示图片

console.log(res)

console.log(res.type)

console.log(res.tempFiles[0])

console.log(res.tempFiles[0].tempFilePath)

let tempFilePaths = res.tempFiles[0].tempFilePath

that.setData({

imgUrl: tempFilePaths

})

}

})

},

方法chooseMedia的效果：

说明：var that=this，为什么要用这句?原因：点击时，this指向的是当前的页面对象;选择时，是另一个对象，故用that进行表示。这句话经常使用。操作2个的不同的对象时，就要用到这句。如组件间传值，数据请求等时，也会用到这一句！

回调成功时，返回一个res对象，为什么会是tempFiles[0]?看调试器的打印结果：

array(2)表示选择了2个文件。

let tempFilePaths = res.tempFiles[0].tempFilePath

解释：将第1个被选择的文件路径赋值给一个变量（因为换头像通常只有一个！），打印结果：

同理，如为多个文件时，可以做一个轶代。

setData的作用是将获取到的tempFilePath值赋值给data选项对应的变量名。那么视图层的SRC就有值了，选择的图片就可以正确显示了。

个人见解，互助提高。