Case sharing--Mini program image group upload

In the development process, multiple groups of photos need to be uploaded for one project requirement. A partial screenshot of the upload page is as follows:

Because there are many groups, it is impossible to have every group Write a layout, so use a for loop to select and display images. First define the data

fileList: [{
      name: "驾驶证",
      cid:"0",
      picimage:[],
    }, {
        name: "整车外观",
        cid: "1",
        picimage: [],
      }, {
        name: "整车铭牌",
        cid: "2",
        picimage: [],
    }, {
        name: "发动机全貌",
        cid: "3",
        picimage: [],
    },{
        name: "增压器全貌",
        cid: "4",
        picimage: [],
    }]

The page layout code part will not be posted. The problems encountered when using the loop are: 1. Call the same wx.chooseImage () The second chapter will appear covering the first one; 2. All groups will be indistinguishable at the same time. Solution: 1. When selecting a picture, concat the picture into the array. 2. Set an id for each group. When the select image button is clicked, the id is passed. chooseImage selects which group to display the image in based on the received id. The key code is as follows:

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
        })
      }
    })}
  },

Upload part, Because the applet can only upload one image at a time, the uploading method needs to be processed. First, put all the image arrays into a collection, then traverse the collection and upload them in array units.

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);
			}
		}
	});
}

Related recommendations:

WeChat applet development and uploading picture function example sharing

CodeIgniter sharing the entire process of successfully uploading pictures

The above is the detailed content of Case sharing--Mini program image group upload. For more information, please follow other related articles on the PHP Chinese website!