Vue 读取后台二进制文件流转为图片显示

春风姐姐

已于 2024-04-10 13:49:33 修改

阅读量815

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2024-04-10 09:56:53 首次发布

本文链接：https://blog.csdn.net/sumimg/article/details/137583828

本文介绍了在Vue项目中，使用axios发送POST请求获取后台返回的二进制数据，通过设置responseType为blob，并将数据转换为图片URL，实现图片显示的过程，参考了华为云的相关教程。

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

Vue 读取后台二进制文件流转为图片显示
后台返回格式
在这里插入图片描述

 <img :src="payImg" id="image" style="width: 150px;height: 150px;" alt="">

axios写法

在这里插入图片描述

重点 responseType: ‘blob’ ，使用的是res中的data blob

this.$axios.post('http://116.148.227.196:xxx/api/xxx/xxx', {参数}, {
    responseType: 'blob' // 重点
  }).then((res) => {
      const url = window.URL.createObjectURL(new Blob([res.data], { type: 'image/png' }));
      
      this.payImg= url;

  });