uniapp预览图片，预览图片列表并保存到手机

uniapp给我们提供很多现成的接口，这篇讲解一下图片预览接口 - uni.previewImage(OBJECT)

***话不多说，直接上干货***

OBJECT 参数说明

参数名	类型	必填	说明
current	String/Number	详见下方说明	详见下方说明
urls	Array	是	需要预览的图片链接列表
indicator	String	否	图片指示器样式，可取值：“default” - 底部圆点指示器； “number” - 顶部数字指示器； “none” - 不显示指示器。
loop	Boolean	否	是否可循环预览，默认值为 false
longPressActions	Object	否	长按图片显示操作菜单，如不填默认为保存相册
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

---

longPressActions 参数说明

参数	类型	必填	说明
itemList	Array	是	按钮的文字数组
itemColor	String	否	按钮的文字颜色，字符串格式，默认为"#000000"
success	Function	否	接口调用成功的回调函数，详见返回参数说明
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	类型	说明
index	Number	用户长按图片的索引值
tapIndex	Number	用户点击按钮列表的索引值

实例：

以下为上传图片并在页面中显示，点击图片预览图片的案例，
上传图片还不熟悉的小伙伴可以看：https://blog.csdn.net/qq_45495857/article/details/108219704这篇博客

<template>
	<view class="content">
		<image src="../../static/logo.png" @click="uploadImg" mode=""></image>
		-------------------------------------
		<image @click="preview(index)" v-for="(item,index) in imgArr" :src="item">
			
		</image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr:[]
			}
		},
		onLoad() {

		},
		methods: {
			uploadImg(){
				let that = this
				uni.chooseImage({
					success(res) {
						console.log(res.tempFilePaths)
						that.imgArr = res.tempFilePaths;
						console.log(that.imgArr)
						}
				})
			},
			preview(index){
				let that = this
				uni.previewImage({
					current:index,
					urls:that.imgArr
				})
			}
		}
	}
</script>

---

//希望以上内容可以帮助到大家