自学uni-app （8）uni-app 上传图片、预览图片、地图组件

最新推荐文章于 2025-03-20 10:53:05 发布

IT_Joliu

最新推荐文章于 2025-03-20 10:53:05 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端自学文章标签： html5 vue.js

本文链接：https://blog.youkuaiyun.com/Sim_perfect/article/details/107924693

本文介绍了uni-app中如何实现图片的上传与预览功能，详细讲解了uni.chooseImage API的用法以及利用v-for渲染预览图片。此外，还探讨了地图组件的应用，包括h5中的Maps模块和uni-app内置的map组件，讨论了相关的方法、对象和回调，并提醒读者注意区分数组的map映射函数。

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

跨平台框架uni-app

上传图片、预览图片
- 上传图片（uni.chooseImage）
- 预览图片
map（地图）
注意

上传图片、预览图片

上传图片（uni.chooseImage）

从本地相册选择图片或使用相机拍照。

案例代码

<template>
	<view>
		<button @click="chooseImg" type="primary">上传图片</button>
		<view>
			<image v-for="item in imgList" :src="item" :key="index"></image>
		</view>
	</view>
</template>

<script>
	export default {
    
    
		data () {
    
    
			return {
    
    
				imgList: []
			}
		}