知识点：

1、如何把二进制流转为base64

2、如何获取接口中后端定义的response headers里面的参数

 

背景：后端给了一个接口，直接访问接口就可以获得图片。

讲道理，直接这样写就ok了。

<el-image :src="codeImg" alt  @click="handleCaptcha" ></el-image>

...

handleCaptcha() {
   this.codeImg = `${this.baseUrl}/api/Jwt/CreateValidateCode?date=${new Date().valueOf()}`;
},

然而，这边需要接口中response headers 里面的参数validatecodekey（如下图），拿来对注册的用户进行验证。 

那就为它单独写一个axios好了。

handleCaptcha(){
   axios.then(`${this.baseUrl}/api/Jwt/CreateValidateCode?date=${new 
 Date().valueOf()}`).then(res=>{
   if(!res) return
   this.codeImg = `${this.baseUrl}/api/Jwt/CreateValidateCode?date=${new Date().valueOf()}`
   this.validateKey = res.headers.validatecodekey;
 }).catch((error)=>{
   console.log(error)
 })    
},

写完发现，不对啊！这样每访问一次接口，图片就生成一次，这样显示的图片和获取的validatecodekey不是同一个接口获得的。

仔细看接口返回的数据，是图片二进制流（如下图）。那么src地址不直接获取，利用base64字符串转为新地址，把二进制流转为base64就不需要调用两次接口了。

代码改成：

handleCaptcha() {
      let dataUrl = `${this.baseUrl}/api/CreateValidateCode?date=${new Date().valueOf()}`;
      axios.get(dataUrl, {
          responseType: "arraybuffer",
        }).then(res => {
            this.validateKey = res.headers.validatecodekey;
          return 'data:image/jpeg;base64,' + btoa(
              new Uint8Array(res.data)
                .reduce((data, byte) => data + String.fromCharCode(byte), '')
            );
        })
        .then(data => {
            this.codeImg = data;
        })
        .catch(ex => {
          console.error(ex);
        });
    },

问题解决。

 

可能遇到的问题：打印出来的res的header里面没有需要的数据。

在默认的请求上， 浏览器只能访问以下默认的响应头：

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

如果想让浏览器能访问到其他的响应头的话，需要在服务器上设置：  Access-Control-Expose-Headers : 'Authorization'