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

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

实例:

<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>