<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>
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,
sizeType: ['original', 'compressed'],
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)
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()
},