小程序uniapp图片上传不超过9张

				<view class="grid col-3 grid-square flex-sub img-show">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
						:data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<9">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
//data定义的数据
imgList: [],
uploadPicture: true, // 判断是否上传完成
			//点击上传图片
			ChooseImage() {
				let that = this
				if (that.imgList.length >= 9) {
					uni.showToast({
						title: '图片最多上传九张!',
						icon: 'none'
					});
					return;
				}
				// 判断是否已经上传完成 -> 上传完成才能进行下一步上传
				 if (that.uploadPicture == false) {
				 	uni.showToast({
				 		title: '请等待上传完成后再选择',
						icon: 'none'
				 	})
				 	return;
				 }
				uni.chooseImage({
					// 最多可以选择的图片张数
					count: 9 - that.imgList.length,
					// original原图 compressed压缩图
					sizeType: ['original', 'compressed'],
					// album 从相册选图 camera 使用相机	
					sourceType: ['album', 'camera'],
					success(res) {

						uni.showLoading({
							title: '正在上传中',
						});
						// 返回的图片临时地址
						var tempFilePaths = res.tempFilePaths;
						// 循环上传多个图片
						for (var i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: '要上传的接口地址',
								filePath: tempFilePaths[i],
								name: 'file',
								header: {
									"Content-Type": "multipart/form-data",
								},
								// 成功后的回调,可根据具体的业务来处理
								success: function(res) {
									var data = JSON.parse(res.data);
									if (data.code == 200) {
										uni.hideLoading();
										that.imgList.push(data.result.data)

										 // 将是否上传完成状态返回 -> 进行存储 uploadPicture 中。
										 that.$nextTick(() => {
										 	if (tempFilePaths.length !== that.imgList.length){
									 		that.uploadPicture = false;
										 	} else{
										 		that.uploadPicture = true;
										 	}
										 })
									} else {
										uni.showToast({
											title: '上传失败!',
											icon: 'none'
										})
									}
								},
							})
						}

					}
				})
			},
	// 删除图片
			DelImg(e) {
				this.uploadPicture = true; // 九张图片减少后将设置为上传按钮可上传
				this.imgList.splice(e.currentTarget.dataset.index, 1)
				this.$forceUpdate()
			},
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值