二进制流图片在前端页面展示的问题

最新推荐文章于 2024-07-22 09:37:18 发布

口袋の的天空

最新推荐文章于 2024-07-22 09:37:18 发布

阅读量3k

点赞数

分类专栏： vue2.0 上传，下载文章标签：前端

本文链接：https://blog.csdn.net/qq_39928481/article/details/124017279

版权

vue2.0 同时被 2 个专栏收录

42 篇文章 3 订阅

订阅专栏

上传，下载

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在前端通过axios从后台获取二进制流图片数据，并将其转换为base64格式，以便在img标签中显示。主要步骤包括设置axios的responseType为'arraybuffer'，然后将二进制流转换为base64字符串，最后将生成的base64字符串作为img标签的src来展示图片。

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

问题：

调用后台图片接口，后台返回二进制流图片数据格式。前端接收到流后处理数据显示在img标签。

解决：

1、先设置axios接收参数格式为"arraybuffer"：

responseType:'arraybuffer'

2、转换为base64格式图片数据在img标签显示：

return 'data:image/png;base64,' + btoa(
    new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
  );

返回的string直接放在img标签src可直接显示

3、完整代码：

Html：

<img ref="code" :src="CodeImgSrc" alt="">

js：

//获取验证码
    async getCode(){
      this.veriUUID = Date.parse(new Date());
      this.$axios({
          method:'get',
          url:'/conch-authority/common/getVerifyCode',
          params: {veriUUID:this.veriUUID},
          responseType:'arraybuffer'
      })   
      .then(res => {              
          this.CodeImgSrc=`data:image/png;base64,${btoa(new Uint8Array(res.data).reduce((data,byte)=>data+String.fromCharCode(byte),""))}`;
      })        
      .catch(err => {            
          reject(err.data)        
      }) 
      
    },