一、业务场景
上传头像后需要回显头像,而后端给出的预览头像的接口需要携带token,因此直接在img标签的src属性怼上头像地址是不可行的,因为无法携带token。
二、解决思路
参考该大佬的思路,主要有一下两个思路:
1.先通过请求获取二进制图片,将图片转成base64,img标签的src属性可以解析base64
2.改变用户验证的方式,通过URL方式传token. 一般情况下用户token是放在header中的,但是img标签无法配置header。
此文采用的是第一种方式,即转base64
三、代码
/**
* 预览头像
* @param params
* @returns {*}
*/
export const previewAvatar = (params) => {
return request({
url: 'xxxxx/xxx',
params,
method: 'get',
responseType: "blob", // 获取图片的二进制流
})
}
// 请求图片
previewAvatar({
filename: avatarName,
uloginname: state.userName
}).then(newRes => {
// URL.createObjectURL(newRes) 对请求回来的图片转成base64,并得到一个当前文件的一个内存URL
commit('setAvatar', URL.createObjectURL(newRes))
})