【笔记】解决用户头像过期无法显示问题
小根据官方规则,用户如果修改了头像,那么一段时间之后,用户原始的头像链接会失效。> 而因为我们一般用户资料储存的时候只储存了链接,就会造成失效,因此需要把用户头像转换成base64直接存数据库中,这样就不怕失效了。
云开发代码
/**
* 插入用户数据
*/
function addUserData(openid, userInfo) {
if (!userInfo) {
console.log('无用户信息,更新失败')
}
// 将头像图片转换为base64
http.get(userInfo.avatarUrl.replace("https", "http"), function (res) {
let chunks = []; //用于保存不断加载的缓冲数据
let size = 0; //保存缓冲数据的总长度
res.on('data', function (chunk) {
chunks.push(chunk); //把接受到的数据逐段保存在缓冲区(Buffer
size += chunk.length;//累加缓冲数据的长度
});
res.on('end', function () {
var data = Buffer.concat(chunks, size);//Buffer.concat将chunks数组中的缓冲数据拼接起来
if (Buffer.isBuffer(data)) {
//如果为Buffer转换为base64并赋值给avatarImg
var base64Img = 'data:image/png;base64,' + data.toString('base64');
userInfo.avatarImg = base64Img
}
db.collection('user').doc(openid).set({
data: userInfo
}).then(e => {
console.log('用户数据更新成功', e)
})
});
});
}
小程序端
//如果直接渲染到页面
<view style="background-image:url({{detail.avatarImg||detail.avatarUrl}});"></view>
//如果需要将头像转成图片保存,如cavans绘图场景
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(src) || [];
if (format) {
const filePath = `${wx.env.USER_DATA_PATH}/tmp_base64src.${format}`;
// console.log(filePath)
// const buffer = wx.base64ToArrayBuffer(bodyData);
FileSystemManager.writeFile({
filePath,
data: bodyData,
encoding: 'base64',
success() {
console.log(filePath)
},
fail() {
console.log (new Error('ERROR_BASE64SRC_WRITE'));
},
});
}