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

最新推荐文章于 2025-06-08 18:25:02 发布

老赵不玩博客

最新推荐文章于 2025-06-08 18:25:02 发布

阅读量1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/zxBlogs/article/details/106619249

uniapp 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用uniapp的chooseImage和previewImage方法实现图片的选择与预览功能。通过具体代码示例，展示了如何在uniapp中选择最多9张图片并进行压缩，以及如何预览已选图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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>