案例分享--小程序图片分组上传

因为分组比较多，不可能每一组写一个布局，因此使用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); 			} 		} 	}); }

相关推荐：

微信小程序开发上传图片功能实例分享

CodeIgniter上传图片成功的全部过程分享

以上就是案例分享--小程序图片分组上传的详细内容，更多内容请关注技术你好其它相关文章！