uniapp：uni.chooseImage、uni.uploadFile，选择图片，上传图片

sunly_

已于 2023-11-06 09:20:35 修改

阅读量1.1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： vue.js 前端小程序

于 2020-07-13 16:59:34 首次发布

本文链接：https://blog.csdn.net/qq_40745143/article/details/107320606

uniapp 专栏收录该内容

108 篇文章

订阅专栏

本文详细介绍了在小程序中实现更换头像功能的具体步骤。包括从本地相册选择图片或使用相机拍照，上传图片到服务器，并获取上传成功后的图片地址进行显示。此教程适用于小程序开发者，特别是那些希望为用户提供个性化头像设置功能的开发者。

更换头像功能，

//上传图片
upfile(){
		let _this = this;
		uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
			count: 1,//默认选择1张图片
			sizeType: ['original', 'compressed'],//original 原图，compressed 压缩图，默认二者都有
			success:  (res)=> {
				console.log(res.tempFilePaths[0]);//成功则返回图片的本地文件路径列表 tempFilePaths
				uni.uploadFile({//将本地资源上传到开发者服务器
					url:baseURL+'/api/Common/upload', //接口地址
					filePath: res.tempFilePaths[0],//图片地址
					name: 'file',
					formData:{
						access_token:uni.getStorageSync('access_token'),//加入token
					},
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data)
						if(data.code ==1){
							this.my_avatar = data.data.url;//上传成功后返回的图片地址
						}
					}
				});
			}
		});
	},