uniApp：上传图片、预览图片

上传图片

uni.chooseImage 方法从本地相册选择图片或使用相机拍照。

参数名	类型	必填	说明
count	Number	否	最多可以选择图片的数量，默认9
sizeType	Array<String>	否	original 原图，compressed 压缩图，默认二者都有
sourceType	Array<String>	否	album 从相册选图，camera 使用相机，默认二者都有。如需直接打开相机或相册，请只选择一项。
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

• count 值在 H5 平台的表现，基于浏览器本身的规范，只能限制单选/多选，不能限制数量。
• sourceType 在 H5 端对应 input 的 capture 属性，设置为 [album] 无效，依然可以使用相机。
• 可以通过用户授权 API 来判断用户是否给应用授权相册或摄像头的访问权限 详情。

图片预览

uni.previewImage 可以实现图片预览。

参数名	类型	必填	说明
current	String/Number	否	current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。App平台在 1.9.5至1.9.8之间，current为必填。不填会报错
urls	Array<String>	是	需要预览的图片链接列表
indicator	String	否	图片指示器样式，可取值：“default” - 底部圆点指示器； “number” - 顶部数字指示器； “none” - 不显示指示器。
loop	Boolean	否	是否可循环预览，默认值为 false
longPressActions	Object	否	长按图片显示操作菜单，如不填默认为 保存相册
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

<template>
	<view>
		<button type="default" @click="chooseImg">上传图片</button>
		<image :src="item" v-for="(item,index) in srcImg" :key='index' @click="previewImg(item)"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return { srcImg: [] }
		},
		methods: {
			// 上传图片
			chooseImg () {
				uni.chooseImage({
					count: 5,
					success: (res)=> {
						this.srcImg = res.tempFilePaths
						console.log(res)
					}
				})
			},
			// 预览图片
			previewImg(current) {
				uni.previewImage({
					current,
					urls: this.srcImg,
					// 图片指示器样式: 小圆点
					indicator: 'default',
					// 循环预览
					loop: true
				})
			}
		}
	}
</script>