二进制二维码转换图片

一只蝲蝲蛄

于 2021-06-21 10:28:18 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_46901857/article/details/118081370

这篇博客介绍了如何使用axios库处理登录验证码的二进制响应，并将其转换为base64编码的图片URL，以便在前端展示。通过设置axios的responseType为'arraybuffer'，然后将接收到的数据转换为base64字符串，可以直接在img标签中显示验证码。

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

getCode() {
   axios({
        method: "get",
        url: "admin/verify",
        responseType: "arraybuffer", // 最为关键
    }).then((res)=> {
        this.imgUrl =
        "data:image/jpeg;base64," + this.arrayBufferToBase64(res.data);
        console.log(this.imgUrl)
    });
},
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);
 },

登录验证码后端返回的二进制进行如上操作
得到的imgUrl 直接放到img标签里面就可以了