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

目录

  • 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>

你可能感兴趣的:(uni-app,vue.js)