三十一、小程序上傳多張圖片帶參數

WXML
<view class='right'>
       <view class="parcel" wx:for="{{pics}}" wx:key="{{index}}">
       <!-- 頁面顯示的圖片 -->
       <image src="{{pics[index]}}" class="According" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>
       <!-- 刪除按鈕 -->
       <image src="{{staticImg}}home/order/apply/error.png" class='deleteimg' catchtap="deleteImg" data-index="{{index}}"></image>
       </view>
       <!-- 添加按鈕 -->
      <image src='/pages/home/carbeauty/service/img/add.png' class='add' bindtap='choose'></image>
    </view>


JS

const app = getApp();

var uploadImg = require('/../../../../utils/uploadImg.js');

     // 圖片
    choose: function (e) {//這里是選取圖片的方法
      var that = this;
      var pics = that.data.pics;
      wx.chooseImage({
        count: 5 - pics.length, // 最多可以選擇的圖片張數，默認9
        sizeType: ['original', 'compressed'], // original 原圖，compressed 壓縮圖，默認二者都有
        sourceType: ['album', 'camera'], // album 從相冊選圖，camera 使用相機，默認二者都有
        success: function (res) {
          var imgsrc = res.tempFilePaths;
          pics = pics.concat(imgsrc);
          console.log(pics);
          that.setData({
            pics: pics,
          });
        },
        fail: function () {
          // fail
        },
        complete: function () {
          // complete
        }
      })
  },

  // 刪除圖片
  deleteImg: function (e) {
    var pics = this.data.pics;
    var index = e.currentTarget.dataset.index;
    pics.splice(index, 1);
    this.setData({
      pics: pics
    });
  },
// 預覽圖片
  previewImg: function (e) {
    //獲取當前圖片的下標
    var index = e.currentTarget.dataset.index;
    //所有圖片
    var pics = this.data.pics;
    wx.previewImage({
      //當前顯示圖片
      current: pics[index],
      //所有圖片
      urls: pics
    })
  },
當點擊上傳按鈕時觸發上傳小程序的函數
// 提交評價
  SubmitEvaluation:function(){
    debugger
    var that = this;
    var attitude = that.data.attitude;
    var time = that.data.time;
    var efficiency = that.data.efficiency;
    var environment = that.data.environment;
    var professional = that.data.professional;
    var arr = [];
    if (attitude==true){
      arr.push('服務態度好')
    }
    if (time==true){
      arr.push('排隊時間短')
    }
    if (efficiency == true) {
      arr.push('效率高')
    }
    if (environment == true) {
      arr.push('門店環境好')
    }
    if (professional == true) {
      arr.push('很專業')
    }
    var str = arr.toString()
    var score = that.data.wjxScore;
    var evaluationDetails = that.data.textarea;
    var orderId = that.data.orderId;
    var pics = that.data.pics;
    var formData={
      orderId: orderId,
      evaluationDetails: evaluationDetails,
      tag: str,
      score: score
    }
//這一步就是調用方法
    uploadImg.uploadimg({
      url: app.washCar.evaluate,//這里是你圖片上傳的接口
      path: pics,//這里是選取的圖片的地址數組
      formData: formData,//其他的參數
    });
  }
})

　　以下JS為封裝的上傳圖片函數

//多張圖片上傳
function uploadimg(data) {
  console.log(data)
  debugger
  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: 'fileData',
    formData: data.formData,//這里是上傳圖片時一起上傳的數據
    success: (resp) => {
      console.log("上傳成功了")
      success++;
      console.log(resp)
      console.log(i);
      //這里可能有BUG，失敗也會執行這里,所以這里應該是后台返回過來的狀態碼為成功時，這里的success才+1
    },
    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);
        // 返回到上一頁
        wx.navigateBack({
          delta:1
        })
      } else {//若圖片還沒有傳完，則繼續調用函數
        console.log(i);
        data.i = i;
        data.success = success;
        data.fail = fail;
        that.uploadimg(data);
      }
    }
  });
}
// 暴露方法
module.exports = {
  uploadimg: uploadimg
}