微信小程序开发(5)——上传多张图片

上传图片的流程是：本地将图片上传到——》微信临时服务器，能够返回临时图片文件地址——》再将临时图片文件地址传输给服务端——》服务端从微信服务器上下载临时图片文件保存在服务端上

这个流程有点绕，花了点时间，踩了几脚坑才成功。

1.图片选择框

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

data: {
    imageSrc:["../../images/defaultImg.png"],// 初始显示预设图片
    imageNum:0,
    imageUploadFlag: true,
    imageErr:'图片提交失败'
  },
chooseImg: function () {
    let that = this
    wx.chooseImage({
      count: 3, // 最多可以选择的图片张数，默认9
      sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
      sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
      success: function (res) {
        // success
        that.setData({
          imageSrc: res.tempFilePaths,
          imageNum: res.tempFilePaths.length
        })
      },
      fail: function (res) {
        // fail
        app.showErr('提示', '上传失败，请重新上传图片');
      }
    })
  },

 2.上传图片

小程序不能批量多张图片上传，因此只能一个一个上传，所以最好封装上传图片的函数进行调用。

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
      },
    // 上传图片时可以携带的数据
      formData: {
        'id': recordId ,//运维记录id
        'imageNum': imageNo,//图片顺序
        '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('上传图片失败');
          that.setData({
            imageUploadFlag: false
          })
        }
        // 判断最后一张图片上传
        if(imageNo == that.data.imageNum){
          wx.hideLoading();
          if (that.data.imageUploadFlag){ // 全部提交成功
            app.showOk('提交成功');
            wx.reLaunch({
              url: '../map/map',
            })
          }else{ // 其中有失败
            app.showErr('出错', that.data.imageErr);
          }
        }
        console.log(res)
      }
    })
  }

调用时需要循环调用

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