小程序开发中你可能会遇到首先会选择图片之后预览看下或者不满意需要删除图片,才会提交吧,这样应该是一个比较好的处理方式。
微信小程序使用
从本地相册选择图片或使用相机拍照。
wxml 代码:
js代码:
//选择上传图片 addphoto: function () { var that = this // 选择图片 wx.chooseImage({ count: 1, // 默认9 sizeType: ['compressed'],//压缩图 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var filePath = res.tempFilePaths[0];//tempFilePaths类型StringArray,图片的本地文件路径列表 that.setData({ images: that.data.images.concat(filePath) }); } }) },
预览图片使用 :
// 预览图集 previewImage: function (e) { var that = this var src = e.currentTarget.dataset.src;//获取data-src // 预览图集 wx.previewImage({ current: src, // 当前显示图片的http链接 urls: that.data.images// 需要预览的图片http链接列表 }); },
删除图片:
//删除图片 deleteImg: function (e) { var that = this var index = e.currentTarget.dataset.index; var images = that.data.images; images.splice(index, 1); //从数组中删除index下标位置,指定数量1,返回新的数组 that.setData({ images: images, }); },
功能实现其实很简单,需要大家好好看下小程序 API 即可,参考以上思路实现起来很简单。
水平有限,若有问题请留言交流!
互相学习,共同进步 :) 转载请注明出处谢谢!