uniapp上传（拍照、本地），预览，删除图片

效果图如下

点击预览效果 

 代码部分

template代码

<template>
		<view class="addrpage_text">
			<view class="addrimg">
				<view class="upimg">
					<view class="uni-uploader__files">
						<view v-for="(image, index) in imageList" :key="index">
							<view class="uni-uploader__file">
								<view class="delete" @tap="onDeleteClick(index)">
									<text>✖️</text>
								</view>
								<image class="uni-uploader__img" :src="image" :data-src="image" @tap.stop="lookimgbut(index)"></image>
							</view>
						</view>
					</view>
					<button @tap="onGetImgClick">点击上传图片</button>
				</view>
			</view>
		</view>
</template>

js代码

<script>
	export default {
		data() {
		  return {
			imageList:[],
			fileimag:[]
		  };
		},
		onLoad() {
		},
		methods: {
			//上传
			onGetImgClick() {
				const that = this
				uni.chooseImage({
					count: 5, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: function (res) {
						// console.log('res.tempFilePaths',res.tempFilePaths)
						const len = that.imageList.length
						for (let i = 0; i < 5 - len; i++) {
							if (res.tempFilePaths[i]) that.imageList.push(res.tempFilePaths[i])
                            //这是我为了方便上传oss存的路径，可以不写
							if (res.tempFilePaths[i]) that.fileimag.push(res.tempFiles[i])
						}
						
					}
				})
			},
			//删除功能
			onDeleteClick(index) {
				this.imageList.splice(index, 1)
                //这是我为了方便上传oss存的路径，可以不写
				this.fileimag.splice(index, 1)
			},
			// 预览功能
			lookimgbut(image) {
				 uni.previewImage({
					 urls: this.imageList,
					 current:image,
                     loop:false //是否可循环预览，默认值为 false，有需要的可以设置为true
				})
			},
		
		},
	}
</script>

 css代码

/* 上传图片盒子 */
	.addrimg{
		width: 100%;
		background-color: rgb(255, 255, 255);
		margin-bottom: 17rpx;
	}
	.uptext{
		color: rgba(74,74,74,1);
		font-size: 28rpx;
		padding: 30rpx 0rpx 0rpx 30rpx;
	}
	.upimg{
		width: 100%;
	}
	.upimg::after{
		content: '';
		display: block;
		clear: both;
	}
	.upimg>image{
		width: 159rpx;
		height: 159rpx;
		margin: 20rpx 0rpx 20rpx 30rpx;
		float: left;
	}
	.uni-uploader__file{
		float: left;
		width: 159rpx;
		height: 159rpx;
		margin: 20rpx 0rpx 20rpx 30rpx;
		position: relative;
	}
	/* 上传成功的图片 */
	.uni-uploader__img{
		float: left;
		width: 159rpx;
		height: 159rpx;
	}
	.delete{
		width: 40rpx;
		height: 40rpx;
		border-radius: 40rpx;
		line-height: 45rpx;
		/* color: rgb(255, 255, 255); */
		font-size: 26rpx;
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		background-color: rgb(255, 255, 255);
		z-index: 99;
		text-align: center;
		border: 1rpx solid rgb(255, 255, 255);
	}
	.delete>text{
		position: absolute;
		top: -2rpx;
		right: -10rpx;
	}