uni-app 上传图片和预览图片

上传图片和预览图片

<template>
	<view>
		<view>我最帅</view>
		<button type="primary" @click="chooseImg">上传图片</button>
	     <!-- 数组循环，绑定路径 -->
		<image v-for="item in image" :src="item" @click="previewImg(item)"></image>
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				image:[]
			}
		},
		methods:{
			// 选择图片
			chooseImg(){
				uni.chooseImage({
					// 浏览器限制不住数量，微信小程序可以
					count: 5,
					success:res=>{
						// 注意：这里箭头函数才能拿到this
						this.image=res.tempFilePaths
				}
				}
				)
			},
			// 预览图片
			previewImg(current){
				uni.previewImage({
					current,
					urls: this.image,
					// loop 使得最后一个图片可以滚动，只在app中
					loop: true,
					// 顶端数字显示，只在app中
					indicator: 'number'
				})
		    }  
	},
	}
</script>

<style>
</style>