小程序Promise上傳文件

小程序如今對ES6支持良好，現在將之前的小程序項目給重新寫了一遍。

遇到了小程序上傳文件的問題，wx.uploadfile只能上傳一個文件或者圖片。

那麼經過了一番折騰，得出瞭如下使用promise來上傳文件的方法。

 

首先定義了一個mini.js 

class Mini {
  
  //上傳文件
  static upload(imageList) {
    var that = this;
    // console.log(imageList)
    return Promise.all(imageList.map((image, index) => {
      return new Promise((resolve, reject) => {
        console.log(image)
        wx.uploadFile({
          url: 'http://xx.com/api/v1/uploads',   //這裏的地址填寫你的後臺上傳地址
          filePath: image,    
          name: 'file[]',     //上傳文件的name
          header:{
            'token':wx.getStorageSync('token')   //我這裏是需要token才能上傳，可以根據業務需要進行修改
          },
          // formData: {
          // },                  //這個我沒用上。註釋掉了
          success: function(res) {
            resolve(res.data);
          },
          fail: function(err) {
            reject(new Error('failed to upload file'));
          }
        });
      });
    }));
  }
};

module.exports = Mini;

 

在需要引入的JS文件的最頂部，page的上面引入mini.js ，這裏的路徑是根據你存放的位置。。

var mini = require('../../../utils/mini.js')

 

下面是隨便定義了一個方法。由於我是用了小程序的一個UI框架，沒有使用微信默認的圖片選擇API。

uploadImages:function(e){
    var that = this;
    var imgs = e.detail.all
    var imgArr = mini.upload(imgs);
    

    //用一個數組去存圖片地址
    var fianl_arr = [];

    imgArr.then((res)=>{
      //回顯
      res.map((item)=>{
        var r = JSON.parse(item)
        fianl_arr.push(r)
      })

      console.log(fianl_arr)
    })   
  },

至此就可以愉快的上傳啦~