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

最新推荐文章于 2025-10-13 09:39:07 发布

原创

最新推荐文章于 2025-10-13 09:39:07 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #vue.js

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

跨平台框架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: []
			}
		},