uniapp微信小程序解决open-type获取用户头像，返回临时路径问题！

解决 open-type 为 chooseAvatar，返回临时路径问题

• 基于微信小程序获取头像昵称规则调整后，当小程序需要让用户完善个人资料时，可以通过微信提供的头像昵称填写能力快速完善
• 微信小程序通过 button 按钮设置 open-type 为 chooseAvatar 时，可以快速获取用户头像；
• 官方文档

效果图

Demo

<button class="avatar-box" open-type="chooseAvatar" @chooseavatar="onChooseAvatarTap">
	<image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
</button>

async onChooseAvatarTap(e) {
	console.log('获取用户头像：', e); // 返回数据结构如下图
	const { avatarUrl } = e.detail;
	this.avatarUrl = avatarUrl;
	
	// 处理返回临时路径，见下方
},

获取头像回调数据结构效果图

解决方式

• 推荐方式：直接上传到服务器，根据个人所需
• uploadfile

上传到服务器

• 例：上传 oss

const result = await this.uploadFile(avatarUrl);
let ossId = result.ossId; // 返回 ossId，传递给后台即可；

// 方法可以提取出去，这里为了方便演示，返回数据格式根据所需修改
uploadFile(url) {
	return new Promise((resolve, reject) => {
		uni.uploadFile({
			url: 'xxx',
			filePath: url,
			name: 'file',
			header: {
				// 头部信息
			},
			success: (res) => {
				resolve(res.data)
			},
			fail: (res) => {
				reject(res);
			}
		});
	})
}

转base64

• 这种方式，先转成 base64，再传给后台

const fileSystemManager = uni.getFileSystemManager();
fileSystemManager.readFile({
	filePath: avatarUrl,
	encoding: 'base64',
	success: (res) => {
		const base64Data = res.data;
		let tmpAvatarUrl = `data:image/jpeg;base64,${base64Data}`;
		console.log('Base64格式的头像数据:', tmpAvatarUrl);
	},
	fail: (error) => {
		console.error('读取文件失败:', error);
	}
});