uniapp的上传图片和图片预览

最新推荐文章于 2025-03-21 15:33:22 发布

乔木思

最新推荐文章于 2025-03-21 15:33:22 发布

阅读量488

点赞数

本文链接：https://blog.youkuaiyun.com/ziyer666/article/details/106392512

版权

本文介绍了一个小程序中实现图片上传和预览功能的方法。通过使用uni.chooseImage选择图片，可以将图片临时路径保存到数组中，并利用uni.previewImage进行图片预览。此功能适用于需要用户上传图片并查看大图的小程序应用。

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

<template>
	<view class="">
		<button type="default" @click="upload"> 上传图片 </button>
		<image v-for="(item,index) in arr" :key="index" :src="item" @click="preventImg(item)"></image>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				arr:[]
			}
		},
		methods:{
			upload(){
				let that = this;
				uni.chooseImage({
					count:3,  // h5中无法限定，只能限定单选和多选
					success:function(res){
						console.log('res',res)
						that.arr = res.tempFilePaths;
						console.log(that.arr)
					}
				})
			},
			preventImg(current){
				uni.previewImage({    // 将多张图片按顺序放大预览
					current:current,
					urls:this.arr
				})
			}
		}
	}
</script>