解决 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);}
});