如何解决img标签的src需要携带token

Posted 2022-11-27 不想掉头发啊！！

一、业务场景

上传头像后需要回显头像，而后端给出的预览头像的接口需要携带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))
              )