VUE项目后端接口返回图片流，图片在preview里，怎么把图片显示到页面上？

最新推荐文章于 2026-03-05 00:15:22 发布

原创最新推荐文章于 2026-03-05 00:15:22 发布 · 6.6k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

TKP

标签

#vue.js #javascript #前端

收录于

javaScript 同时被 2 个专栏收录

48 篇文章

订阅专栏

vue

47 篇文章

订阅专栏

本文档描述了如何处理后端返回的二维码文件流并在前端展示。关键步骤包括将axios请求的responseType设置为blob，然后将返回的数据转换为URL格式，并赋值给图片元素的src属性。通过console.log可以看到文件流数据，使用window.URL.createObjectURL()可以将数据转化为可预览的链接。

在这里插入图片描述
今天碰到一个接口，后端返的二维码是文件流，在preview里能看到，但response里啥都没有，这种情况怎么拿到这张图片呢？

第一步：设置请求

	//axios封装的请求里面的responseType要设置为blob

第二步：页面调用接口，使用接口返回回显图片

在这里插入图片描述

<img :src="bigPoster" alt="" class="bigPoster" /> //页面图片元素
async myInviteCode() {
      var data = {};
      try {
        let res = await this.$http("myInviteCode", data, "post", true, true);
        console.log(res);//打印能看到文件流
        const href = window.URL.createObjectURL(res.data);//转成url格式
        this.bigPoster = href; //赋值
      } catch (error) {
        console.log(error);
      }
    },