小程序图片分组上传的案例分享及相关要点

fileList: [{

      name: "驾驶证",

      cid:"0",

      picimage:[],

    }, {

        name: "整车外观",

        cid: "1",

        picimage: [],

      }, {

        name: "整车铭牌",

        cid: "2",

        picimage: [],

    }, {

        name: "发动机全貌",

        cid: "3",

        picimage: [],

    },{

        name: "增压器全貌",

        cid: "4",

        picimage: [],

    }]

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

            }

        }

    });

}