微信小程序多图批量上传

主要使用 async/await 及 Promise实现同步,具体代码如下:

            //选择图片
			ChooseImage() {
				const count=3;
				uni.chooseImage({
					count,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: async res => {
						const tempFiles = res.tempFilePaths;
						if(this.imgList.length>count) return;
						let list=[];
						//判断下次选择图片时是否超过限制数量,如果超过截取最后一张
						if(this.imgList.length+tempFiles.length>count){
							list=[tempFiles.pop()];
						}
						else{
							list=tempFiles;
						}
						const arr=[];
						for(let i=0;i<list.length;i++){
							const src=await this.UploadImage(list[i]);
							arr.push(src);
						}
						this.imgList = this.imgList.concat(arr);
					}
				});
			},
			//上传图片
			UploadImage(path){
				uni.showLoading({
					title: '上传中',
				});
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: config.url+this.$api.uploadImg, //接口地址
						filePath: path, //图片地址
						name: 'file',
						formData: {
							brandId: app.globalData.userInfo.brandId, //加入brandId
						},
						success: (res) => {
							const data=JSON.parse(res.data);
							if (data.code == 0) {//上传成功后返回的图片地址
								const src=data.data.src;
								// this.imgList = this.imgList.concat([data.data.src]);
								resolve(src);
							}
							else{
								setTimeout(()=>{
									uni.showToast({
										icon:'none',
										title:'上传失败'
									});
								},500);
								reject(res);
							}
						},
						complete:(complete)=>{
							uni.hideLoading();
						},
						fail:(err)=>{
							setTimeout(()=>{
								uni.showToast({
									icon:'none',
									title:'上传失败'
								});
							},500);
							reject(err);
						}
					});
				});
			},
			//预览图片
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			//删除图片 uploadImg
			DelImg(e) {
				this.imgList.splice(e.currentTarget.dataset.index, 1)
			},