知识点:

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'

 

Logo

前往低代码交流专区

更多推荐