小程序如今对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 final_arr= [];
imgArr.then((res)=>{
//回显
res.map((item)=>{
var r = JSON.parse(item)
final_arr.push(r)
})
console.log(final_arr)
})
},
至此就可以愉快的上传啦~