微信小程序实现多图片上传

官方文档中的示例是单文件上传的，而且因为path值是string类型，所以不能整个数组上传，因此我把我个人的实现方法分享一下

首先在app.js文件中写入多图片上传的方法

  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: 'files',
      formData: null,
      success: (resp) => {
        success++;
        console.log(resp)
        console.log(i);
      },
      fail: (res) => {
        fail++;
        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);
        }
      }
    })
  }

其中需要注意的是name字段的名字要和后台一样，否则上传会丢失，就是即使前端返回上传成功，但是后台也收不到图片，比如这里是files，后台也要写files，如果这里写filedata，后台也要写filedata

在index.js文件中引用这个方法，代码如下

Page({
  data: {
    countIndex: 8,
    imageList:[],
    count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    src: ''
  }
})

chooseImage: function() {
    var that = this
    wx.chooseImage({
      count: this.data.count[this.data.countIndex],
      success: function(res) {
        var imgsrc = res.tempFilePaths;
        console.log(res)
        that.setData({
          imageList: imgsrc
        })
      }
    })
  },
  //上传图片
  uploadimg: function() {
    var imageList = this.data.imageList;
    app.uploadimg({
      url: 'http://172.16.97.62:8080/upanddown/upload2',//这里是你要上传的服务器接口
      path: imageList//这里是你最开始定义的图片数组
    })
  }

然后在表单提交按钮里调用的话代码如下

  formSubmit: function(e) {
    console.log('form发生了submit事件，携带的数据为：', e.detail.value)
    const params = e.detail.value
    //校验表单
    if (!this.WxValidate.checkForm(params)) {
      const error = this.WxValidate.errorList[0]
      this.showModal(error)
      return false
    }
    this.uploadimg()//这里一定要用this
    this.showModal({
      msg: '提交成功'
    })
  }

这样在提交表单的同时就能上传图片了，但是我这里表单的提交没有写接口，因为比较简单，自行实现吧

最后在真机上测试时，远程调试里的结果