uni-app上传图片功能，点击对应图片实现删除

傷城~ 2022-12-25 11:52 240阅读 0赞

<template>
    	<view class="" style="padding:  10px;">
    		<view class="uploadstyle"  @click="addPicture" v-if='tempFilePathsEditor.length == 0'>
    			<image src="../../static/img/unloadPho.png" mode="" style="width: 150upx;height: 150upx;"></image>
    			<view class="" style="color: #999;font-size: 35upx;">
    				上传人脸认证识别
    			</view>
    		</view>
    		<view class="" style="font-size: 35upx;font-weight: 700;margin-top: 20upx;border-top: 1px solid #f6f6f6;
    							box-shadow: 0px 0px 20px rgba(28, 41, 146, 0.1);height: 100%;padding: 30upx 0;"
    				v-if="tempFilePathsEditor.length!=0">
    			<text style="font-weight: 700;padding: 30upx 0;">我的照片</text>
    			<view class="upload-border" style="position: relative;">
    				<view class="upload-border" v-for="(item, index) in tempFilePathsEditor" :key="index"
    					  style="margin-bottom: 100upx;;position: relative;" v-if="tempFilePathsEditor.length!= 0">
    					<image :src=item style="width: 100%;"  mode="widthFix"></image>
    				</view>	
    				<image :src=imgUrl mode="" style="position: absolute;top:0px;right: 0px;width: 80upx;height: 80upx;z-index: 999;"
    						@click.stop="changePho" ></image>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	import http from '../../../common/http.js';
    	import {mapState} from 'vuex'
    	export default {
    		computed:{
    			...mapState(['facePhotos'])
    		},
    		data() {
    			return {
    				tempFilePathsEditor: [],
    				newUrl: '',
    				showUnload: true,
    				imgUrl:'../../static/img/change.png'
    			}
    		},
    		onLoad() {
    			console.log('facePhotos:onLoad')
    			var checkingItem = uni.getStorageSync('facePhotos');
    			console.log(checkingItem)
    			this.tempFilePathsEditor.push(checkingItem)
    		},
    		methods:{
    			changePho() {
    				var that = this
    				uni.showModal({
    				  title: '提示',
    				  content: '是否删除？',
    				  success: res => {
    				    if (res.confirm) {
    				      that.showUnload = false
    					  that.tempFilePathsEditor.length = 0
    				      that.tempFilePathsEditor = []
    					  that.newUrl = ''
    					  // uni.clearStorage();
    				    } else if (res.cancel) {
    				      }
    				    }
    				})
    			},
    			addPicture() {
    				var that = this
    				uni.chooseImage({
    					count: 1,
    					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    					sourceType: ['camera','album'], //从相册选择
    					success: function(res) {
    						// console.log("修改图片" + JSON.stringify(res))
    						for (var n = 0; n < res.tempFilePaths.length; n++) {
    							// console.log("http.baseUrl + '/api/test/upload'=" + http.baseUrl + '/api/test/upload')
    							uni.uploadFile({
    								url: http.baseUrl + '/api/test/upload',
    								filePath: res.tempFilePaths[n],
    								name: 'file',
    								formData: {},
    								success: function(res) {
    									console.log('res=' + JSON.stringify(res))
    									if (JSON.parse(res.data).code == 0) { 
    										that.tempFilePathsEditor.push(JSON.parse(res.data).data.url)
    										console.log('that.tempFilePathsEditor=',that.tempFilePathsEditor)
    										try {
    											uni.setStorageSync('facePhotos', that.tempFilePathsEditor[0]);
    										} catch (e) {
    											// error
    										}
    										// uni.setStorage('facePhotos',JSON.parse(res.data).data.url);
    										// console.log(uni.setStorage('facePhotos',JSON.parse(res.data).data.url))
    									}
    								}
    							})
    						}
    					},
    					error: function(e) {
    						console.log(e);
    					}
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    	.uploadstyle {
    		background-color: #f6f6f6;
    		text-align: center;
    		padding: 160upx 0;
    		border-radius: 20upx;
    		/* box-shadow: 0px 0px 20px rgba(28, 41, 146, 0.1); */
    	}
    </style>

**实现了上传图片，显示图片，删除图片，并存到本地。  
一个小案例，希望能给予帮助。**