微信小程序中选择图片或拍照
微信小程序为用户提供了一个选择图片或拍照的功能,该功能通常在上传图片的场景中使用,通过该功能用户可以轻松选择相册中的图片或者使用手机相机拍摄照片。下文将详细介绍如何在微信小程序中使用chooseImage方法实现图片上传操作。
1. chooseImage方法概述
在微信小程序中,通过调用wx.chooseImage方法可以打开手机相册或者相机,获取用户选择的图片信息。
使用方法:
wx.chooseImage({
count: 1, //最多可选择几张图片,默认9
sizeType: ['original', 'compressed'], //指定原图或压缩图,默认两者都有
sourceType: ['album', 'camera'], //指定相册还是相机,默认两者都有
success: function (res) {
//res.tempFilePaths:用户选择的图片的本地文件路径列表
}
})
2. 参数说明
chooseImage方法有三个参数,分别为count、sizeType、sourceType。
2.1 count
count参数用来指定用户最多可选择几张图片,该参数可以设置为1-9的数字,如果不设置,默认为9。
2.2 sizeType
sizeType参数用于指定用户所选图片的尺寸类型,共有两种类型可选,分别为原图和压缩图。原图即用户所选图片的原始尺寸,压缩图则是指被压缩过的图片。如果不设置该参数,默认为两者都有。
2.3 sourceType
sourceType参数用于指定用户选择图片的来源,分为两种类型,即相册和相机。如果不设置该参数,默认为两者都有。
3. 返回值说明
chooseImage方法在用户选择完图片后会返回一个对象,其中tempFilePaths属性为用户选择的图片的本地文件路径,文件路径为一个数组,允许用户选择多张图片,数组中每个元素为一个本地文件路径字符串。
4. 代码示例
下面是一个简单的使用chooseImage方法的示例代码,实现了用户选择一张照片并在页面中显示的功能。
Page({
chooseImage: function () {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var tempFilePaths = res.tempFilePaths
that.setData({
imgSrc: tempFilePaths[0] //将选择的图片路径赋值给imgSrc变量
})
}
})
}
})
在上述代码中,我们在Page对象中定义了一个chooseImage方法,在方法中调用了wx.chooseImage方法,当用户选择完图片后,系统会自动调用success回调函数,我们可以在回调函数中获取用户选择的图片路径,并将其赋值给imgSrc变量,然后在页面中通过数据绑定将图片展示出来。
5. 总结
本文详细介绍了微信小程序中选择图片或拍照的方法和使用步骤,以及相关参数和返回值的说明。读者可以参考本文内容,在微信小程序开发中灵活运用chooseImage方法,实现更加丰富的图片上传功能。