uniapp 图片点击预览&删除&上传单张/多张图片

1.单张图片预览

<image :src="userInfoBbusiness"  @click="previewImg(userInfoBbusiness)"></image>

methods: {
	//单张图片预览
	previewImg(imgurl) {
		let _this = this;
		let imgsArray = [];
		imgsArray[0] = imgurl
		uni.previewImage({
			current: 0,
			urls: imgsArray
		});
	},
}

2.多张图片预览（并且可以上传、删除）

	<view class='image_list '>
		<!--1.显示图片-->
		<view class="item" v-for="(item,index) in imageList" :key="index">
			<image :src="host+item" mode="widthFix"></image>
			<view class="del" @click="delFun(index)">删除</view>
		</view>
		
		<!--2.上传图片（可多张--这里限制上传3张）-->
		<view class="image_box" v-if="imageList.length<3" @click="uploadFun('imageList')">
			<view class="image_box_item">
				<image src="../../static/images/img_sct@2x.png" mode="heightFix"></image>
				<view>点击上传</view>
			</view>
		</view>
	</view>
	
	<!--3.上传图片（单张头像）-->
	<view class="upload_con" @click="uploadFun('avatar')">
		<view class="upload_view">
			<image :src="avatar ? host+avatar:'../../static/images/icon_txsc@2x.png'" mode="aspectFit" class="upLoadImg"></image>
			<view class="upload_text">点此上传</view>
		</view>
	</view>

	data() {
		return {
			host: this.$api.hostImages,  
			imageList:[],
		}
	},
	methods: {
		 // 1.多张图片预览
		 previewImg(index) {
		 	let that= this;
		    let imgsArray = [];
		    for (let i = 0; i < that.imageList.length; i++) {
		         if (that.imgUrlList[i].videoUrl == "") {
		             imgsArray.push(this.$api.hostImages+that.imageList[i].imgUrl);
		          }
		    }
		     // #ifdef MP
		      uni.previewImage({
		          current: index - 1,
		          urls: imgsArray,
		       });
		     // #endif
		
		     // #ifndef MP
		        uni.previewImage({
		           current: index - 1,
		           urls: imgsArray,
		       	});
		      // #endif
		 },
		 
		 // 1.删除图片
		delFun(index) {
			console.log("删除", index)
			this.imageList.splice(index, 1)
		},
		
		//2.3.上传图片
		uploadFun(type) {
			let that = this
			uni.chooseImage({
				count: 3, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					console.log("JSON", res);
					const tempFilePaths = [];
					res.tempFilePaths.forEach((item) => {
						uni.uploadFile({
							url: that.$api.host + that.$url.url.upload, //仅为示例，非真实的接口地址
							filePath: item,
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								console.log('uploadFileRes', JSON.parse(uploadFileRes.data).initialPreview[0]);
								if (type == 'imageList') {
									//多张图片
									that.imageList.push(JSON.parse(uploadFileRes.data)
										.initialPreview[0]);
								} else {
									//单张头像
									that.avatar = JSON.parse(uploadFileRes.data)
										.initialPreview[0]; //这里获取了单张的图片路径
									// that.person_image = JSON.parse(uploadFileRes.data);
								}

								// that.fileList.push(JSON.parse(uploadFileRes.data).data);
								console.log("that.fileList==>", that.fileList)
							}
						});
					})
				},
				fail: function(err) {
					console.log(err)
				}
			});
		},
		//上传结束
	}


	<style>
		.image_list .item{
			position: relative;
		}
		.image_list .del{
			width: 80rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			background-color: rgba(0, 0, 0, 0.4);
			color: #FFF;
			border-radius: 12rpx;
			font-size: 24rpx;
		}
	</style>