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