建站
咨询
售后
建站咨询
小程序图片分组上传的方法-创新互联
小编给大家分享一下小程序图片分组上传的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
在开发小程中，在一个项目需求需要上传多组照片，上传页面部分截图如下：
因为分组比较多，不可能每一组写一个布局，因此使用for循环进行图片的选择显示，首先定义数据
fileList: [{
name: "驾驶证",
cid:"0",
picimage:[],
}, {
name: "整车外观",
cid: "1",
picimage: [],
}, {
name: "整车铭牌",
cid: "2",
picimage: [],
}, {
name: "发动机全貌",
cid: "3",
picimage: [],
},{
name: "增压器全貌",
cid: "4",
picimage: [],
}]页面布局代码部分就不贴出了，使用循环遇到的问题有：1.调用同一个wx.chooseImage()会出现第二章覆盖第一张；2.所有组同时没法区分。解决办法：1.当选择图片时，将图片concat到数组中去。2.为每一个组设置一个id，当点击选择图片按钮时将id传过去，chooseImage根据所接收到的id选择将图片显示在哪个分组，关键代码如下：
chooseWxImage: function (e) {
var _this = this;
var id = e.currentTarget.dataset.picid;
console.log("id-----" + id)
if (_this.data.fileList[id].picimage.length>1){
wx.showModal({
content: '你最多只能选择2张照片',
showCancel:false,
})
}else{
wx.chooseImage({
count:2,
sizeType: "compressed",
sourceType: ['album', 'camera'],
success: function (res) {
var arr = _this.data.fileList[id].picimage;
for (let i in res.tempFilePaths) {
arr.push(res.tempFilePaths[i])
}
_this.setData({
fileList: _this.data.fileList
})
}
})}
},上传部分，因为小程序只能一张一张上传，因此需要对uploading方法进行处理，先将所有图片数组放到一个集合中，然后对集合进行遍历，以数组为单位进行上传。
upload: function (e) {
var that = this;
var fileList = that.data.fileList;
var tempath = [] ;//图片地址，将所有图片数组放进去
for(let i in fileList){
tempath.push(fileList[i].picimage)
}
console.log("tempimage"+tempath)
wx.showLoading({
title: '上传中...',
})
for (let j in tempath) {
requestUtil.uploadimg({//uploading为封装的一个方法
url: '上传地址',
path: tempath[j],//遍历地址，将每个数组循环上传
})
wx.hideLoading();
wx.showToast({
title: '上传成功！',
icon:'success',
duration:'2500',
})
}
}
//多张图片上传，这部分代码是参考网上的，使用当中遇到一个bug就是如果传过来的数组为空的话，就会卡死小程序，因此需要加上判断数组不能为空
function uploadimg(data) {
var that = this,
i = data.i ? data.i : 0,//当前上传的哪张图片
success = data.success ? data.success : 0,//上传成功的个数
fail = data.fail ? data.fail : 0;//上传失败的个数
wx.uploadFile({
url: data.url,
filePath: data.path[i],
name: 'file',//这里根据自己的实际情况改
formData: data.formData,//这里是上传图片时一起上传的数据
success: (resp) => {
if (resp.statusCode == 200) {
success++;//图片上传成功，图片上传成功的变量+1
console.log(resp)
console.log(i);
}
},
fail: (res) => {
fail++;//图片上传失败，图片上传失败的变量+1
console.log(data.path)
console.log('fail:' + i + "fail:" + fail);
},
complete: () => {
console.log(i);
i++;//这个图片执行完上传后，开始上传下一张
if (i == data.path.length) { //当图片传完时，停止调用
console.log('执行完毕');
console.log('成功：' + success + " 失败：" + fail);
} else {//若图片还没有传完，则继续调用函数
console.log(i);
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimg(data);
}
}
});
}以上是“小程序图片分组上传的方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
网页名称：小程序图片分组上传的方法-创新互联
文章源于：http://lswzjz.com/article/psdho.html
