uniapp 运用Promise实现多图片上传

使用业务场景，循环多个图片上传控件，每一个上传到指定字段；

dom结构如下：

			
			
				{{ item.key }}： 
				    
				  
				  
				
				
					
				
				
					
						
							
							
												
					
					
				
				
				仅支持.jpg, .jpeg, .png文件，最多能上传9个，且单个文件不超过20M
				
					
									
			
			
				
					
								
						
		

js部分：

var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]

data() {
			return {				
				sourceTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeTypeIndex: 2,
				sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9],		
				userForm: {					
					wellId: null,	
					constructProcessList:[
						{key:'字段1',value:[]},
						{key:'字段2',value:[]},
						{key:'字段3',value:[]},
						{key:'字段4',value:[]},
						{key:'字段5',value:[]},
						{key:'字段6',value:[]},
					],
				},
				rules: {
					wellId: {type: 'string',required: true},
				},
			}
		},

methods: {
    addItem(){
			  this.userForm.constructProcessList.push({
			    key: '',
			    value: []
			  })
			},
			deleteItem(item, index){
			  this.userForm.constructProcessList.splice(index, 1)
			},
			// 删除图片
			deletePic(index,i) {
				uni.showModal({
					content: "是否删除此图片？",
					success: (e) => {
						if (e.confirm) {
							this.userForm.constructProcessList[index].value.splice(i, 1);
						}
					}
				})
			},
    chooseImage: async function(i) {
				let _self = this;
				if (_self.userForm.constructProcessList[i].value.length >= 9) {
					let isContinue = await this.isFullImg(i);
					if (!isContinue) {
						return;
					}
				}				
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: 9,
					success: (res) => {	
						let tempFiles = res.tempFiles;
						let paths = tempFiles.map(file => file.path); // 提取路径					
						_self.userForm.constructProcessList[i].value = _self.userForm.constructProcessList[i].value.concat(paths);					
						
						// 发起上传图片的请求，将图片上传到服务器	
						//多图上传
						const pList = [];
						tempFiles.forEach(function(tempFile,item) {
							const p = new Promise(function (resolve, reject) {
								uni.uploadFile({
									url: _self.$api.baseUrl + "/nkdxsjcj/sys/base/uploadFiles",
									filePath: tempFile.path, 
									name: 'files',
									header: {'token': uni.getStorageSync('token')},
									formData: {
										'files': tempFile.path,
										folderName: _self.userForm.wellId
									},
									success: function (resl) {
										const data = JSON.parse(resl.data);
										resolve(data);
									},
									fail: function (err) {
										uni.showToast({
										    title: "上传失败："+err,
										    icon: 'none',
										    duration: 2000
										});
										reject(err);
									}
								});
							});
							pList.push(p);
						});
						Promise.all(pList).then(function (results) {
							let fileList=[];
							for(let j=0; j{
						let resSize = resp.tempFiles[0].size;
						if(resSize > 20971520){
						    uni.showToast({
						        title: "上传的图片大小不超过20m",
						        icon: 'none',
						        duration: 2000
						    });
							return
						}
					}
				})
			},
isFullImg(i) {
				let _self = this;
				return new Promise((res) => {
					uni.showModal({
						content: "已经有9张图片了,是否清空现有图片？",
						success: (e) => {
							if (e.confirm) {
								_self.userForm.constructProcessList[i].value=[];
								res(true);
							} else {
								res(false)
							}
						},
						fail: () => {
							res(false)
						}
					})
				})
			},
			previewImage(e,i) {
				console.log(e)
				var current = e.target.dataset.src;				
				uni.previewImage({
					current: current,
					urls: this.userForm.constructProcessList[i].value
				})
			},
}