点击上传图片,删除后显示上传前的图片

<view class="question-images flex">
						<block v-for="(item, index) in images3" :key="index">
							<view class="q-image-wrap flex">
								<!-- 图片缩略图 -->
								<image class="q-image" :src="item" mode="aspectFill" :data-idx="index"
									@tap="handleImagePreview3"></image>
								<!-- 移除图片的按钮 -->
								<view class="q-image-remover" :data-idx="index" @tap="removeImage3">
									<view class="close-img">✘</view>
								</view>
							</view>
						</block>
						<view class="uploadImgBtn" @tap="chooseImage3" v-if="images3.length < 8">
							<image style="width: 150rpx; height: 150rpx" src="/pagespaotui/static/images/017.png"></image>
						</view>
					</view>
chooseImage3(e) {
				var that = this;
				uni.chooseImage({
					sizeType: ['compressed'],
					//可选择原图或压缩后的图片
					sourceType: ['album', 'camera'],
					//可选择性开放访问相册、相机
					success: (res) => {
						uni.showLoading({
							title: '上传中'
						});
			
						uni.hideLoading({
							complete: (res) => {}
						});
			
						console.log(res);
			
						const images = that.images3.concat(res.tempFilePaths);
						const images1 = images.length <= 9 ? images : images.slice(0, 9);
						that.images3 = images1
					}
			
				});
			},
			
			removeImage3(e) {
				var that = this;
				var images = that.images3; // 获取要删除的第几张图片的下标
			
				const idx = e.currentTarget.dataset.idx; // splice  第一个参数是下表值  第二个参数是删除的数量
			
				images.splice(idx, 1);
				this.images3 = images
			},
			
			handleImagePreview3(e) {
				const idx = e.target.dataset.idx;
				const images = this.images3;
				uni.previewImage({
					current: images[idx],
					//当前预览的图片
					urls: images //所有要预览的图片
				});
			},
data(){
    return {
        images3: [],
    }
}

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值