uni-app项目中实现图片上传、删除回显和预览

uni-app项目中实现图片上传、删除回显和预览

<!-- 上传图片操作  -->
<view class="img">
    <view class="image" v-for="(item,index) in form.imgurl" :key="index">
    <!-- 回显图片 -->
        <image :src="item"></image>
		     <image class="del" src="/static/delete.png" mode="" @click="deleteImg(item)">
		</image>
	</view>
		<view @tap="chooseImage" class="it">上传图片</view>
</view>

//预览  支持双指缩放
<view @click="showView(item.image)">
	<image style="width: 100%;height: 200px;" :src="item.image"></image>
</view>

//该段为执行保存操作代码 图片路径时的赋值操作  将返回的路径赋值给需要保存的表字段
this.form.img = this.form.imgurl.toString()
//上传图片
			chooseImage() {
				let that = this
				uni.chooseImage({
					count: 9,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.showLoading()
						let uper = uni.uploadFile({
							url://上传图片地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (r) => {
								uni.hideLoading()
							
								that.form.imgurl.push(r.data)

							},
							fail() {
								uni.hideLoading()
							}
						})
						uper.onProgressUpdate((res) => {
							this.percent = res.progress
						})
					},
				})
			},
			deleteFun(item) {
				uni.showModal({
					title: '删除',
					content: `确认删除？`,
					success: (res) => {
						if (res.confirm) {
							var index = this.form.imgurl.findIndex(items => {
								if (items == item) {
									return true
								}
							})
							this.form.img_url.splice(index, 1);
						}
					}
				})
			}，//预览
			showView(image) {
				let imgArr = [];
				imgArr.push(image);
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				})
			}