uni-app之图片的上传 与 图片预览

uni-app之图片的上传

• 图片上传

图片上传 与 图片预览

<template>
	<view>
		<button type="default" @click="upload">上传图片</button>
		<image v-for="(item) in imgArr" :src="item" mode="" 
		@click="previewImg(item)"></image>
	</view>
</template>

<script>
	export default {
    
    
		data(){
    
    
			return {
    
    
				imgArr:[]
			}
		},	
		methods: {
    
    
			upload(){
    
    
				// 图片的上传
				uni.chooseImage({
    
    
					count:5,
					success: res => {
    
    
						this.imgArr = res.tempFiles.map(item => {
    
    
							return item.path
						})
					}
				})
			},
			// 图片的预览
			previewImg(item){
    
    
				uni.previewImage({
    
    
					current:item,
					urls:this.imgArr, // url集合
					loop:true, // 可循环  h5有效
					indicator:"number" // 指示器 h5有效
				})
			}
		}
	}
</script>