uniapp选择图片及图片预览的实现

一、uniapp选择图片及图片预览的实现

• uni.chooseImage(OBJECT) 选择图片
• uni.previewImage(OBJECT) 图片预览

1、具体实现代码如下

• getImg事件选择图片
• lookImg事件预览图片

<template>
	<view>
		<button type="default" @click="getImg">选择图片</button>
		<view v-for="(item,index) in imgArr" :key="index">
			<image :src="item" @click="lookImg(index)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr: []
			};
		},
		methods: {
			getImg: function() {
				uni.chooseImage({
					count: 9,
					// sizeType压缩图片
					sizeType: "compressed",
					success: (res) => {
						this.imgArr = res.tempFilePaths
					}
				})
			},
			lookImg: function(val) {
				const urls = this.imgArr
				const current = val
				uni.previewImage({
					urls,
					current
				})
			}
		}
	}
</script>