axios接收返回值为ArrayBuffer的二进制图片

最新推荐文章于 2024-07-29 13:47:29 发布

Juant_

最新推荐文章于 2024-07-29 13:47:29 发布

阅读量792

点赞数

分类专栏： axios 文章标签： vue.js ajax

本文链接：https://blog.csdn.net/Juant_/article/details/120468810

版权

博客内容介绍了如何使用axios从接口获取返回类型为ArrayBuffer的二进制图片，并成功在前端展示。通过修改代码，实现了图片的正确显示。

摘要由CSDN通过智能技术生成

代码：

// 标签
<img :src="validateCode" />

// 接口： 
const getValidateCode = () => axios.get('xxx') // 获取登录验证码

// 请求方法
getValidateCode().then(res => {
    console.log(res);
    this.validateCode = res;
});

请求后直接返回图片

控制台输出为

修改后的代码：

// 接口： 
const getValidateCode = params => axios.get('xxx', params) // 获取登录验证码

// 请求方法
getValidateCode({ responseType: 'arraybuffer' })
    .then(({ data }) => {
        return 'data:image/jpg;base64,' + btoa(
            new Uint8Array(data).reduce((data, byte) => data +         
                String.fromCharCode(byte