uniapp 循环上传多张照片，（图片删除，选择图片张数动态控制，未上传完成不可进行上传）

return {uploadPicture: true, // 判断是否上传完成pictureList:[], // 图片列表}// 删除图片delpicture(id){this.uploadPicture = true; // 九张图片减少后将设置为上传按钮可上传for(let i = 0;i <=...

张媛的博客

2723人浏览 · 2022-04-25 15:24:26

张媛的博客 · 2022-04-25 15:24:26 发布

return {
uploadPicture: true, // 判断是否上传完成

pictureList:[], // 图片列表
}

// 删除图片
            delpicture(id){
                this.uploadPicture = true; // 九张图片减少后将设置为上传按钮可上传
                for(let i = 0;i <= this.pictureList.length - 1; i++) {
                     if(this.pictureList[i].file_id == id){
                         this.pictureList.splice(i,1);
                         uni.showToast({
                            icon:'none',
                             title:'删除成功！'
                         });
                         break;
                     }
                }
            },

// 图片上传
			onUploadImage(){
				let that = this;
				// 判断图片的长度
				if(this.pictureList.length >= 9) {
					uni.showToast({
						title:'图片最多上传九张！',
						icon:'none'
					});
					return;
				}
				// 判断是否已经上传完成 -> 上传完成才能进行下一步上传
				if(this.uploadPicture == false) {
					uni.showToast({
						title:'请等待上传完成后再选择',
						icon:'none'
					})
					return;
				}
				uni.chooseImage({
					count: 9 - this.pictureList.length, // (最大上传的张数 - 现有条数 = 选择的图片张数 )
					sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['camera','album'], //album 从相册选图，camera 使用相机
					success: function(res) {
						const tempFilePaths = res.tempFilePaths[0];
						console.log(res.tempFilePaths.length)
						let counts = 0;
						for(let i =0;i<=res.tempFilePaths.length - 1;i++){
							counts ++;
							console.log(res.tempFilePaths.length,"---",counts)
							// 判断是否上传完成，如果没有则让上传按钮禁止上传
							 
							uni.uploadFile({
								url: '接口地址', //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[i],
								name: 'file',
								formData: {
									'type': '1',
								},
								header:{
									"token": uni.getStorageInfoSync('token')
								},
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data);
									that.pictureList.push({
										path: getApp().globalData.requrl + '/'+ data.data.path,
										ext: data.data.ext,
										file_id: data.data.file_id,
										name: data.data.name,
									});
									// 将是否上传完成状态返回 -> 进行存储 uploadPicture 中。
									that.$nextTick(()=>{
										if(res.tempFilePaths.length !== that.pictureList.length) that.uploadPicture = false;
										else that.uploadPicture = true;
									})
								}
							});
						}
					}
				});
			},