The process of uploading pictures is: upload pictures locally to the temporary wechat server, return the temporary picture file address, and then transfer the temporary picture file address to the server, which downloads the temporary picture file from the wechat server and saves it on the server

This process is a little winding. It took some time and several footwells to succeed.

1. Picture selection box

<view class='upload'>
      <image mode="aspectFitf" src="{{item}}" bindtap="chooseImg" wx:for="{{imageSrc}}" wx:key="{{index}}"></image>
</view>

data: {
    imageSrc:["../../images/defaultImg.png"],// Initial display of preset pictures
    imageNum:0,
    imageUploadFlag: true,
    imageErr:'Picture submission failed'
  },
chooseImg: function () {
    let that = this
    wx.chooseImage({
      count: 3, // The maximum number of pictures that can be selected, 9 by default
      sizeType: ['original', 'compressed'], // original, compressed, both by default
      sourceType: ['album', 'camera'], // Album selects pictures from album, camera uses camera, both of which are available by default
      success: function (res) {
        // success
        that.setData({
          imageSrc: res.tempFilePaths,
          imageNum: res.tempFilePaths.length
        })
      },
      fail: function (res) {
        // fail
        app.showErr('Tips', 'Upload failed, please upload the picture again');
      }
    })
  },

2. Upload pictures

Small programs can't upload multiple pictures in batches, so they can only upload one picture at a time, so it's better to encapsulate the function of uploading pictures for calling.

uploadImage: function (recordId, imageUrl,imageNo){
    let that = this;
    console.log(recordId, imageUrl, imageNo);
    const uploadTask = wx.uploadFile({
      url: app.globalData.serverUrl+'operationsrecord/image/add',
      filePath: imageUrl,
      name: 'image',
      header: {
        "Content-Type": "multipart/form-data",
        'Cookie': 'JSESSIONID=' + app.globalData.sessionId
      },
    // Data that can be carried when uploading pictures
      formData: {
        'id': recordId ,//Operation and maintenance record id
        'imageNum': imageNo,//Picture order
        'url': imageUrl
      },
      success: function (res) {
        let data = res.data;
        let success = data.match(/"success":(true|false)/g)[0].split(':')[1];
        console.log(typeof(success),success);
        if (success=="false"){
          console.log('Upload picture failed');
          that.setData({
            imageUploadFlag: false
          })
        }
        // Judge the last image upload
        if(imageNo == that.data.imageNum){
          wx.hideLoading();
          if (that.data.imageUploadFlag){ // All submitted successfully
            app.showOk('Submit successfully');
            wx.reLaunch({
              url: '../map/map',
            })
          }else{ // There are failures
            app.showErr('error', that.data.imageErr);
          }
        }
        console.log(res)
      }
    })
  }

Circular call required when calling

let tempFilePaths = that.data.imageSrc;
for (let i = 0; i < that.data.imageNum;i++){
    let imageUrl = tempFilePaths[i];
    that.uploadImage(recordId,imageUrl,i+1);
}