vant weapp 多选上传图片_微信小程序结合vant weapp ui实现多图上传组件

微信小程序多图上传

最近在写小程序的商品上传，为方便需要使用多张图片的上传的功能。因为小程序不支持数组的多张图片同时上传，然后根据自己的需求创建了一个组件希望能够帮到大家

效果图

创建一个图片上传的promise

uploadFilePromise(filePath, Authorization) {

return new Promise(function(resolve, reject) {

wx.uploadFile({

url: `${DOMAIN}File/Image/upload`,

filePath,

name: 'file',

header: {

Authorization,

},

success: res => {

// 触发图片上传事件

let data = JSON.parse(res.data);

if (data.code != SUCCESS_CODE) { //SUCCESS_CODE为本项目请求成功的判断无需在意

wx.showToast({

title: data.message || '上传失败',

icon: 'none'

})

} else {

resolve(res)

}

},

fail: res => {

reject(res)

}

});

})

},

创建一个promise.all (多个图片上传成功后再改变dom)

chooseImage(){

wx.chooseImage({

count,

sizeType: ['original', 'compressed'],

sourceType: ['album', 'camera'],

success(res) {

const tempFilePaths &#