uniapp3上传图片

上传图片

点击按钮上传图片

 

 图片的预览事件

 uni.chooseImage(OBJECT) 上传图片

OBJECT 参数说明

参数名	类型	必填	说明	平台差异说明
count	Number	否	最多可以选择的图片张数，默认9	count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。
sizeType	Array<String>	否	original 原图，compressed 压缩图，默认二者都有	App、微信小程序、支付宝小程序、百度小程序
extension	Array<String>	否	根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。	H5(HBuilder X2.9.9+)
sourceType	Array<String>	否	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
crop	Object	否	图像裁剪参数，设置后 sizeType 失效	App 3.1.19+
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数	小程序、App
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，在应用下次启动时才能访问得到。

success 返回参数说明

参数	类型	说明
tempFilePaths	Array<String>	图片的本地文件路径列表
tempFiles	Array<Object>、Array<File>	图片的本地文件列表，每一项是一个 File 对象

File 对象结构如下

参数	类型	说明
path	String	本地文件路径
size	Number	本地文件大小，单位：B
name	String	包含扩展名的文件名称，仅H5支持
type	String	文件类型，仅H5支持

 uni.previewImage(OBJECT) 预览图片

OBJECT 参数说明

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

整体代码示例：

<template>
	<view>
		<text>上传图片</text>
		<view>
			<button type="default" @click="shangchuan">上传图片</button>
		</view>
		<!-- 返回在页面上 -->
		<view v-for="(item,index) in image" :key="index">
			<!-- 传item就是点击谁显示谁 -->
			<image :src="item" mode="aspectFill" @click="yulan(item)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				image:[]
			}
		},
		methods: {
			// 图片的上传
			shangchuan(){
				console.log('点击上传图片按钮')
				uni.chooseImage({
					count:5,
					success:res=>{
						console.log(res)
						// 成功后返回图片临时路径数组
						// 数据请求成功后，保存在image里面，拼接数组，让以前的图片不消失
						this.image=[...res.tempFilePaths,...this.image]
					}
				})
			},
			// 点击图片进行预览
			yulan(res){
				console.log('点击预览')
				console.log('显示路径',res)
				uni.previewImage({
					// current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。
					current:res,
					urls:this.image,
					loop:true,
					indicator:"default"
				})
			}
		}
	}
</script>

<style>

</style>