uniapp - 图片的上传和预览

更多图片上传内容请查看 uniapp 官网：https://uniapp.dcloud.io/api/media/image?id=chooseimage

uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

OBJECT 参数说明

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

示例

uni.chooseImage({
	count: 3,
	success: res => {
		console.log("结果", res)
	}
})

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	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例

uni.previewImage({
	current:current,
	urls:res.tempFilePaths,
	indicator:"number",
	loop:true
})

一个图片上传和预览的 demo 实例

<template>
	<view>
		<button @click="upload">上传图片</button>
		<image v-for="(item,index) in imgList" :key="index" :src="item" @click="searchImg(item)"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: []
			}
		},
		methods: {
			upload() {
				uni.chooseImage({
					count: 3,
					success: res => {
						console.log("结果", res)
					}
				})
			},
			searchImg(current){
				uni.previewImage({
					current:current,
					urls:this.imgList,
					indicator:"number",
					loop:true
				})
			}
		}
	}
</script>

<style>
</style>