<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: [],
}
}