PHP前端开发

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

百变鹏仔 10小时前 #前端问答
文章标签 案例

在开发小程中,在一个项目需求需要上传多组照片,上传页面部分截图如下:

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