小程序上传多张图片
以前写过小程序网络和本地图片到相册的方法：https://cloud.tencent.com/developer/article/1156773，写过上传一张或多张图片到阿里云OSShttps://www.jianshu.com/p/ea2e567b6f2c， 写过小程序加载本地图片路径问题https://cloud.tencent.com/developer/article/1181975，这次写个布局关于多张图片上传。
效果图
思路：
整体图片选择使用一个view控件，前面选中的图片为一个block根据选择图片的数量来显示多少个，后面的选择图片按钮为一个view。选中图片上面的删除按钮，使用绝对定位和相对定位来处理。添加图片，删除图片，点击选中图片查看大图等添加一个点击事件
考虑问题：
1.上传的多少张图片？
2.上传后想删除？
3.如何控制布局，用好用flex布局。
关键代码:
/** 选择图片 */
chooseImage: function () {
var that = this;
wx.chooseImage({
count: 9 - that.data.imgArr.length,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
if (res.tempFilePaths.count == 0) {
return;
}
//上传图片
var imgArrNow = that.data.imgArr;
imgArrNow = imgArrNow.concat(res.tempFilePaths);
that.setData({
imgArr: imgArrNow
})
that.chooseViewShow();
}
})
},代码中的9是中最多传9张图片，图片类型是否为压缩，图片来源是相册还是相机。
/** 删除图片 */
deleteImv: function (e) {
var imgArr = this.data.imgArr;
var itemIndex = e.currentTarget.dataset.id;
imgArr.splice(itemIndex, 1);
this.setData({
imgArr: imgArr
})
//判断是否隐藏选择图片
this.chooseViewShow();
},删除照片，改变布局格式显示。
/** 是否隐藏图片选择 */
chooseViewShow: function () {
if (this.data.imgArr.length >= 9) {
this.setData({
chooseViewShow: false
})
} else {
this.setData({
chooseViewShow: true
})
}
},
/** 显示图片 */
showImage: function (e) {
var imgArr = this.data.imgArr;
var itemIndex = e.currentTarget.dataset.id;
wx.previewImage({
current: imgArr[itemIndex], // 当前显示图片的http链接
urls: imgArr // 需要预览的图片http链接列表
})
},用到系统自带的方法，点击图片预览大图。
demo地址为：https://github.com/dt8888
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.09.11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读