1.点击图中的上传组件上传图片
因为需求需要做了一部分处理,上传图片到三张以后隐藏上传按钮,删除全部图片后可以继续上传图片
html 部分
<view class="cent-bottom-t">
买家上传支付凭证
</view>
<view class="cent-bottom-m">
<view class="uoloadImg">
<view v-for="(el, index) in fileList" :key="index">
<view class="uoloadImg-image">
<image @click="checkImgboxBuy(fileList, index)" :src="imgUrl+el" mode=""></image>
<view class="jian" @click="popImgBuy(index)">
<image src="../../static/close.png" mode=""></image>
</view>
</view>
</view>
<view class="uoloadImg-box" @click="openImagePageBuy" v-if="uploadFlag">
<view class="jia">
<image src="../../static/add.png" mode=""></image>
</view>
</view>
</view>
2.js
data{
return{
fileList :[],
imgUrl: "https://lmst.youmitao8.com",
sizeType: ['compressed'],
imageList: [], // 申诉图片地址
uploadFlag: true ,// 申诉图片大于3张隐藏上传按钮
}
}
openImagePage() {
let that = this;
if (that.fileList.length >= 3) {
uni.showToast({
title: "最多支持3张图片",
icon: "none"
})
return;
}
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
uni.showLoading({
title: '图片上传中'
});
that.uploadImage(res.tempFilePaths)
}
});
},
uploadImage(tempFilePaths) {
let _this = this;
uni.uploadFile({
url: 'xxxxxxxx', //接口地址
header: {
"token": uni.getStorageSync('token'),
}, //请求token
filePath: tempFilePaths[0],
name: 'file',
success: (res) => {
let data = JSON.parse(res.data);
let url = data.data.url;
// 选中图片
if (_this.fileList.indexOf(url) == -1) {
_this.fileList.push(url);
}
uni.hideLoading();
if (_this.fileList.length >= 3) {
_this.uploadFlag = false
} else {
_this.uploadFlag = true
}
}
});
},
checkImgbox(fileList, index) { //放大图片
console.log(fileList,index,999)
let arr = [];
fileList.forEach((el) => {
arr.push(this.imgUrl + el);
})
uni.previewImage({
urls: arr,
current: index
});
},
popImg(index) { //删除图片
this.fileList.splice(index, 1);
if(this.fileList.length<1){
this.uploadFlag = true
}
},