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

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

<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'
  })
}