uni-app上传一个头像

最新推荐文章于 2025-01-13 09:58:51 发布

玺..

最新推荐文章于 2025-01-13 09:58:51 发布

阅读量3.3k

点赞数 2

本文链接：https://blog.youkuaiyun.com/F_mengze/article/details/106560671

版权

本文详细介绍了如何在uni-app中实现图片上传功能，包括设置图片显示样式、定义数据区及事件处理过程。通过实例展示了使用uni.chooseImage API选择图片，并将其显示在界面上的方法。

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

<view class="chooseImg" @tap="openChooseImg">
	<text v-if="!imgUrl">+</text>
	<image v-else :src="imgUrl" ></image> 
</view>

设置样式，在数据区定义一个imgUrl

data(){
	return{
		imgUrl:""
	}
}

写事件
详见：https://uniapp.dcloud.io/api/media/image?id=chooseimage

/* 上传头像 */
			openChooseImg(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择，和摄像头功能，默认二者都有
				    success: res=> {
						console.log(res)     
						/*res.tempFilePaths[0]是获取到的第一个数据的blob地址，将他赋值给数据区的imgUrl*/
						this.imgUrl=res.tempFilePaths[0]
						console.log(this.imgUrl)
				    }
				});
			}