微信小程序 - Promise 封裝多張圖片上傳

前言

最近，項目需要新加一個用戶發佈文章的功能，因爲小程序選取的圖片都是臨時路徑，所以需要上傳到服務器轉爲網絡圖片路徑再發布出去。但是小程序上傳圖片只支持單張圖片，在這種情況下圖片的上傳完成後輸出的順序、判斷圖片是否全部上傳完成等，都是一些需要注意的點。在 Promise 的中有一個 Promise.all 的方法（簡單來說就是當所有的異步請求成功後纔會執行），在這個方法的幫助下，這些問題都迎刃而解。

代碼

export const uploadImage = (tempFilePaths)=>{
  return new Promise((presolve,preject)=>{
    if({}.toString.call(tempFilePaths)!='[object Array]'){
      throw new TypeError(`上傳圖片參數 tempFilePaths 類型錯誤!`)
    }
    //路徑數組爲空時  不上傳
    if(tempFilePaths.length==0){
      presolve([])
      return
    }
    wx.showLoading({
      title: '上傳圖片中...',
      mask:true
    });

    getToken().then(token => {
      let uploads = []
      tempFilePaths.forEach((item,i)=>{
        uploads[i] = new Promise ((resolve)=>{
          wx.uploadFile({
            url:'http://www.baidu.com/post',
            filePath: item,
            name: 'file',
            header:{
              'Content-Type':'multipart/form-data'
            },
            formData:{
              appName:tbl,
              token:token,
              method:'file',
              action:'uploadphoto'
            },
            success(res){
              resolve(JSON.parse(res.data).url)
            },
            fail(err){
              console.log(err)
              wx.hideLoading()
            }
          })
        })
      })

      Promise.all(uploads).then(res=>{
        //圖片上傳完成
        presolve(res)
        wx.hideLoading()
      }).catch(err=>{
        preject(err)
        wx.hideLoading()
        wx.showToast({
          title:'上傳失敗請重試',
          icon:'none'
        })
      })
    })
  })
}

思路

1.函數接收一個臨時圖片路徑數組，對傳入的參數做一些判斷

2.遍歷圖片路徑數組，將每一個上傳圖片請求封裝爲promise，依次將這些 promise 對象存入一個數組

3.Promise.all 傳入 promise對象 數組，當所有的圖片都上傳成功後，在 then 中接收到上傳完成的網絡圖片數組

注意點 

注意點1： wx.uploadFile 中 name 屬性填寫的是後端接收文件的字段的key（好吧，我自己都不知道我自己在說什麼，還是上圖吧。。。）

 

比如，這裏後端上傳文件的字段爲file，在name的屬性值填寫的就是file 。

注意點2：wx.uploadFile 的 success 函數中輸出的數據是字符串，需要JSON.parse轉爲對象才能使用

最後

Promise.all 接受的數組和輸出的數組都是一致的，then方法接收到完成的結果，這樣一來就解決了上傳圖片順序和所有圖片上傳完成的問題。

 

求知若渴，虛心若愚！

每一次解決問題的過程都是對自我的提升！