将arraybuffer数组转换成base64

好记性真不如烂笔头

已于 2022-04-26 17:26:46 修改

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

于 2022-04-24 23:07:02 首次发布

本文链接：https://blog.csdn.net/m0_46581222/article/details/124394227

vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种在Vue应用中处理后端返回的ArrayBuffer验证码的方法，通过axios获取arraybuffer格式的验证码，然后转换为二进制，进一步转化为Base64格式的图片，最终显示在img标签上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作记录

后端传回的验证码格式是arraybuffer格式，需要将其转换成二进制，再转换成base64格式的图片

axios

export const getVerificationCode = () => {
    return service({
        method: 'post',
        url: "/api/sysUser/image",
        responseType: 'arraybuffer'
    })
}

vue

html:
//点击切换验证码
<img class="codeimg" :src="imgSrc" @click="getImage">

 加载页面先调用一次
  created() {
    this.getImage()
  },
 
 data:
 imgSrc: '',
 

方法：
    async getImage() {
      let res = await getVerificationCode();
      let array = res.data;
      let imageData = "data:image/png;base64," + btoa(
          new Uint8Array(array).reduce(
              (data, byte) => data + String.fromCharCode(byte), ""
          )
      )
      this.imgSrc = imageData;
    }