Vue axios 加载服务端返回的二进制图片

原创已于 2022-06-05 06:22:56 修改 · 843 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-06-01 10:40:03 首次发布

Vue 专栏收录该内容

34 篇文章

订阅专栏

本文档展示了如何使用Axios库从API请求数据，并将响应的ArrayBuffer类型转换为Base64编码的图片数据。通过设置`responseType`为`arraybuffer`，然后处理返回的Buffer来生成图片的Base64 URL。

Axios设置：

axios.get('url',{
    params:{
        b: ''         
    },
    responseType: 'arraybuffer'   //这里是声明期望返回的数据类型,为arraybuffer
}).then(res => {    
    const bufferUrl = btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''));
    const imgURL = 'data:image/png;base64,' + bufferUrl;//imgURL就是最后的图片base64数据
})

关注博主即可阅读全文