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)
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容