Vue 显示后端的二进制流图片

vue版本：2.6.14
axios 版本：^0.27.2

场景描述：
在vue中想要将后端返回的二进制图片验证码显示在前端

关键代码如下（重点是 responseType: arraybuffer 的设置）：

<template>
  ...
  <!--使用elementui图片组件进行回显-->
  <el-image :src="codeUrl"></el-image>
  ...
</template>

<script>
export default {
  data() {
    return {
      codeUrl: '' // 转换的验证码图片url
    }
  },
  methods: {
    async getCode() {
      const { data: res } = await axios.get(请求验证码的接口地址, {responseType: 'arraybuffer' })
      this.codeUrl = 'data:image/jpg;base64,' + arrayBufferToBase64(res);
    }
  } 
}
</script>

二进制转 base64 方法

// 二进制转base64
arrayBufferToBase64 (buffer) {
  var binary = ''
  var bytes = new Uint8Array(buffer)
  var len = bytes.byteLength
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i])
  }
  return window.btoa(binary)
}