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

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;
									})
								}
							});
						}
					}
				});
			},

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张媛的博客

打赏不能超过你的早餐钱。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值