微信小程序多图上传

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

效果图

创建一个图片上传的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 = res.tempFilePaths; //拿到选择的图片地址

that.triggerEvent('disableBtn', {}, {}); //上传过程中禁用父组件中的保存按钮，防止图片未上传成功

let promiseList = tempFilePaths.map(temp => that.uploadFilePromise(temp, Authorization)); //获取promise 队列数组

Promise.all(promiseList).then((result) => {

let uploadImgList = result.map(item => ({ file_key: JSON.parse(item.data).data.key, url: JSON.parse(item.data).data.url })).reverse();

imgList.unshift(...uploadImgList); //将新上传的图片从头部插入原图片数组中

that.triggerEvent('Upload', { imgList, key }) //上传成功将新的图片数组给到组件

})

}

})

}

完整js 文件

import Dialog from '../../../../miniprogram_npm/@vant/weapp/dialog/dialog';

import {

DOMAIN,

TOKEN_KEY,

SUCCESS_CODE

} from "../../../../configs";

Component({

/**

* 组件的属性列表

*/

properties: {

imgList: { //图片列表

type: [Array],

value: [],

},

max: { //最大可以上传数

type: [Number],

value: 10

},

key: { //图片列表key

type: [String],

value: ''

}

},

/**

* 组件的初始数据

*/

data: {

},

methods: {

upload(e) {

const {key,max} = e.target.dataset;

let imgList = this.data.imgList,

listLen=imgList.length,

count = parseInt(max - listLen) > 9 ? 9 : parseInt(max - listLen),

that = this;

var Authorization = wx.getStorageSync(TOKEN_KEY);

if (listLen >= max) {

wx.showToast({

title: `最多上传${max}张图片`,

icon: 'none',

duration: 2000

});

return false;

}

wx.chooseImage({

count,

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

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

success(res) {

const tempFilePaths = res.tempFilePaths;

that.triggerEvent('disableBtn', {}, {});

let promiseList = tempFilePaths.map(temp => that.uploadFilePromise(temp, Authorization));

Promise.all(promiseList).then((result) => {

let uploadImgList = result.map(item => ({ file_key: JSON.parse(item.data).data.key, url: JSON.parse(item.data).data.url })).reverse();

imgList.unshift(...uploadImgList);

that.triggerEvent('Upload', { imgList, key })

})

}

})

},

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) {

wx.showToast({

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

icon: 'none'

})

} else {

resolve(res)

}

},

fail: res => {

reject(res)

}

});

})

},

delete(e) {

const { key, index } = e.target.dataset;

Dialog.confirm({

selector: '#create-dialog',

title: '提示',

message: '确认删除该图吗？'

}).then(() => {

this.triggerEvent('Delete', {key,index})

}).catch(() => {

// on cancel

})

},

}

})

创建一个wxml

删除

写上样式wxss

.product-img-list {

display: flex;

flex-wrap: wrap;

}

.product-img-list .img-box {

width: 100rpx;

margin-right: 24rpx;

display: flex;

flex-direction: column;

align-items: center;

color: #909090;

font-size: 28rpx;

margin-top: 32rpx;

}

.img-box .product-img{

width: 100rpx;

height: 100rpx;

margin-bottom: 24rpx;

}

.add-image-icon {

width: 100rpx;

height: 100rpx;

margin-top: 32rpx;

}

父组件的调用–wxml

7.父组件的调用 --js

//上传图片

uploadProImg(e) {

let form = this.data.form,

key = e.detail.key,

imgList = e.detail.imgList;

form[key] = imgList;

this.setData({ form, btnDisabled: false })

},

//上传按钮禁用

disableBtn(e) {

this.setData({ btnDisabled: true })

},

//删除图片

deleteProImg(e) {

let form = this.data.form,

key = e.detail.key,

index = e.detail.index,

keyList = form[key];

keyList.splice(index, 1);

form[key] = keyList;

this.setData({ form })

},