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
				}
			},
			

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐