关于验证码图片转createObjectURL

[lazyken]

今天工作时遇到一个问题。后端给我一个接口可以请求验证码的图片。请求头里还含有token信息，登录时需要验证码和token信息。
于是请求接口时遇到了问题，我可拿到header里的token，但是这时我发现res.data(用的axios库请求的)既不是图片也不是一个url。对于小白的我来说瞬间懵逼。
在大佬的帮助下后来解决了这个问题。
res.data保存是图片文件的二进制信息，log时可以看到全是乱码，我们可以在请求时加一个请求头responseType: 'blob',将二进制数据转为blob格式的二进制数据。拿到blob格式的图片数据后用window.URL.createObkectURL，可以生成这个图片的url。
这样我就可以既得到响应头里的token信息又重新生成了这个图片的url了，接下来就是把新的url插入img就可以了

const imgBlobData= axios({
  url: 'xxxxxxxx',
  reponseType: 'blob'
}).then(res => res.data)

const imgUrl = window.URL.createObjectURL(imgBlobData)