如何在前端显示后端返回的图片流（以Vue为例）

最新推荐文章于 2024-09-09 17:33:35 发布

敲出真谛

最新推荐文章于 2024-09-09 17:33:35 发布

阅读量1.1w

点赞数 4

分类专栏：项目经验文章标签：图片流

本文链接：https://blog.csdn.net/qq_36818627/article/details/120272723

版权

项目经验专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文档介绍如何在前端处理后端返回的图片流数据。当后台接口返回图片流而不是普通URL时，需要使用window.URL.createObjectURL()方法来创建可显示的图片源。在请求图片时，需指定responseType为'blob'。通过遍历数据并异步处理每个图片流，可以成功将图片展示在轮播组件中。

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

我们在前端显示图片一般用法是这样的

<template>
  <el-carousel :interval="4000" type="card" height="310px" :autoplay="true">
    <el-carousel-item v-for="item in dataList" :key="item.url" @click.native="jump(item)">
      <img :src="item.dataSrc" alt="暂无图片" style="cursor: pointer">
      <div class="tip">提供文件调查功能</div>
    </el-carousel-item>
  </el-carousel>
</template>

如果是一般的地址，是没有问题的，但是如果后台返回的是个流的话，上面的写法就gg了。

如果流的话，我们需要如下设置将后端返回的流用window.URL.createObjectURL（）处理一下。

async init() {
      try {
        const { data } = await _getOnlineCarouselList()
        data.forEach(async(item) => {
          const fileId = item.fileId
            // 返回的是图片流
          const result = await _getOnlineCarouselPicture({ fileId })
          this.$set(item, 'dataSrc', window.URL.createObjectURL(result))
        })
        this.carousel = data
        console.log(this.carousel)
      } catch (error) {
        console.log(error)
      }
    }

在访问后台调用接口的时候添加 responseType: 'blob'属性

export const _getOnlineCarouselPicture = (params) => {
  return request.get(`/common/file/showImg?` + new Date().getTime(), {
    params,
    responseType: 'blob'
  })
}