uniapp上传图片、展示图片、预览图片、长按删除图片

比眉伴天荒 2023-01-01 00:55 599阅读 0赞

# 上传图片、展示图片、预览图片、长按删除图片 #

1.  上传图片: uni.chooseImage上传图片之后可以获得文件的临时路径.
2.  展示图片: success返回参数中, tempFilePaths为图片的本地文件路径列表, tempFiles为图片的本地文件列表. 展示图片将这些路径放在src中.
3.  预览图片: 使用uni.previewImage预览图片, 其中urls接收的是预览图片链接列表.current为当前显示图片的链接/索引值.
4.  长按删除图片: 将存放图片的数组或字符串清空

**实例:**

![在这里插入图片描述][2020123013413953.gif]

<template>
    	<view class="all">
    		<view class="image">
    			<view class="imageText" @click="seleckImage" v-if="imgSrc" style="vertical-align: top;">
    				选择图片
    			</view>
    			<view class="imgSrc" v-else>
    				<image mode="heightFix" v-for="(item,index) in imgArr" :src="item" @click="preview(item)" @longtap="delImg"></image>
    			</view>
    
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				imgArr: [], //存放图片数组
    				imgSrc: true //控制文字和图片显隐
    			}
    		},
    		onLoad() {
    
    		},
    		methods: {
    			seleckImage() {
    				let that = this
    				uni.chooseImage({
    					count: 1, //默认9
    					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    					sourceType: ['album','camera'], //从相册选择
    					success: function(res) {
    						console.log('选择图片')
    						console.log(res.tempFilePaths)
    						// 将数组存放在数组中
    						that.imgArr = res.tempFilePaths
    						that.imgSrc = false
    						uni.getImageInfo({
    							src: res.tempFilePaths[0],
    							succenn: function(img) {
    								console.log('预览图片')
    								console.log(img)
    							},
    							fail: function(err) {
    								console.log(err)
    							}
    						})
    					},
    					fail: function(err) {
    						console.log(err)
    					}
    				});
    			},
    			// 点击图片进行预览
    			preview(img) {
    				console.log('预览')
    				// 新建一个存放预览图片的空数组
    				var imgArr = []
    				imgArr.push(img)
    				uni.previewImage({
    					urls: imgArr,
    					current: imgArr[0],
    					longPressActions: {
    						itemList: ['发送给朋友', '保存图片', '收藏'],
    						success: function(data) {
    							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
    						},
    						fail: function(err) {
    							console.log(err.errMsg);
    						}
    					}
    				});
    			},
    			// 长按删除图片
    			delImg() {
    				let that = this
    				uni.showModal({
    					title: '删除图片',
    					content: '确定删除图片?',
    					success: res => {
    						if (res.confirm) {
    							// 删除图片 将数据置空
    							that.imgSrc = true
    							that.imgArr = []
    						} else if (res.cancel) {
    							console.log('用户点击取消');
    						}
    					}
    				})
    			}
    		}
    	}
    </script>
    
    <style lang="less">
    	.all {
    		padding: 20rpx;
    
    		.image {
    			
    			box-sizing: border-box;
    			border: 2rpx dashed #666666;
    			height: 440rpx;
    
    			.imageText {
    				text-align: center;
    				line-height: 440rpx;
    			}
    
    			.imgSrc {
    				height: 440rpx;
    				text-align: center;
    
    				image {
    					height: 100%;
    				}
    			}
    		}
    	}
    </style>

[2020123013413953.gif]: /images/20221120/5e231af874bb4a3f937a63c3b0734c24.png