小程序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)
    })   
  },

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