小程式多圖片上傳

檔案上傳 微信小程式官方文件

這裡為了方便使用，對 小程式檔案上傳的函式進行了 再次的封裝；同時為了方便記憶，是和使用，按照微信給出的文件進行編寫；
先看一下怎麼使用吧！

// 選擇照片
wx.chooseImage({
  success: function(res) {
    console.log(res, app.util.url('applet_img_upload'));
    // 這裡把地址 和 上傳照片，都放在了一個 util.js 中
    // 在 app.js 中 util: requier('utils/util.js')
    app.
 
util.uploadFile({
      url: app.util.url('applet_img_upload'),
      filePath: res.tempFilePaths,	// 也可以傳單張 res.tempFilePaths[0]，這樣好像 多此一舉了
      name: 'image',			// 具有預設值，可寫可不寫
      success: e => {
        console.log(e);
      },
      fail: err => {
        console.log(err);
      }
    })
  }
 
,
})

這裡把該函式放到了 util.js 中；放到其他地方也是可以的；

/*
 * @param {Object}
 * upImageFile({url: 'test.com', filePath: ['1.png', '2.png'], name: 'image', success: res => {}, fail: err => {} })
 */
 // i 記錄當前上傳的圖片 fileUrl 圖片上傳後的地址 err 記錄上傳失敗，或錯誤次數
 uploadFile: function (obj, i = 0, fileUrl = [], err = 0) {
 	// 有時也可能會直接上傳單張圖片
 

   if (typeof obj.filePath === 'string') obj.filePath = [obj.filePath];
   wx.uploadFile({
     url: obj.url,					// 接收圖片的地址
     filePath: obj.filePath[i],		// 圖片的臨時路徑，由微信返回
     name: obj.name || "image",		// 對應的 key，這裡設定預設 image
     success: res => {
       var resData = res.data;
       // 異常處理，有時後臺返回的資料可能會有點問題，這個看需求寫
       try {
         resData = JSON.parse(resData);
       }
       catch (err) {
         resData = JSON.parse(resData.substring(1));
       }
       if (resData.ec === 200) {                       // 判斷上傳是否成功，根據後臺返回的狀態判定，這裡需要根據你自己後臺返回的狀態去判斷
         i++;
         fileUrl.push(resData.data.path);              // 後臺返回圖片路徑
         // 如果都上傳完畢 直接 執行 success
         if (i === obj.filePath.length) {
           if (obj.success) obj.success({ msg: 'uploadFile:ok', data: fileUrl, statusCode: res.statusCode });
         }
         // 如果沒有完成 則繼續呼叫該函式
         else {
           this.uploadFile(obj, i, fileUrl);
         }
       }
       else {
       	// 如果沒有失敗，記錄上傳失敗次數，我這裡定義上傳 失敗 3次結束執行上傳，返回失敗結果，執行 fail；後續如果有需求，這塊你也可以改成動態的
         err++;
         if (err <= 3) this.uploadFile(obj, i, fileUrl, err);
         else {
           console.log('%c 返回資訊：', 'color: #f00', resData)
           console.log('%c 請注意: 請求成功時，後臺返回的資訊可能與此函式中的配置不一致，注意修改', 'color: blue');
         }
       }
     },
     fail: err => {
     // 上傳失敗執行，同上
       err++;
       if (err <= 3) this.uploadFile(obj, i, fileUrl, err);
       else {
         var errObj = { err, i, fileUrl };
         if (obj.fail) obj.fail(errObj);
         console.log('%c 圖片上傳失敗，請注意檢查...', 'color: #f00', errObj);
       }
     }
   })
 }

T.T