后端返回blob文件流里面的图片使用el-image-viewer显示

在使用Element UI库中的`<el-image-viewer>`组件展示后端返回的Blob文件流里的图片时，你需要先将Blob转换为Base64编码，因为`<el-image-viewer>`通常期望的是字符串URL形式的图片源。

以下是步骤：

1. 获取到后端返回的Blob数据：

const blob = response.data; // 假设response是从API获取的包含Blob的数据

2. 使用浏览器原生的FileReader API读取Blob并转换为Base64：

let reader = new FileReader();
reader.onload = function (event) {
  let imageUrl = 'data:image/' + event.target.result.split(',')[0]; // Base64编码后的URL
  // 然后你可以设置这个imageUrl作为el-image-viewer的src属性
  let viewer = document.createElement('el-image-viewer');
  viewer.src = imageUrl;
  // 将viewer添加到DOM中
  document.body.appendChild(viewer);
};
reader.readAsDataURL(blob); // 开始读取

相关问题

vue3 后端返回pdf文件流前端预览

在Vue 3中，可以通过以下步骤实现后端返回的PDF文件流在前端进行预览：

1. 创建一个用于显示PDF的组件。可以使用现成的第三方库，例如`vue2-pdf-viewer`或者`vue-pdf`，也可以自己实现一个简单的组件。

2. 在Vue组件中引入后端返回的PDF文件流。通常情况下，可以通过发送HTTP请求到后端来获取PDF文件流数据。

3. 在发送HTTP请求时，确保设置正确的response类型为`arraybuffer`，以确保能够正确处理二进制数据。

4. 使用JavaScript中的Blob对象创建一个URL，将PDF文件流转换为URL地址。

5. 将转换后的URL地址传递给PDF预览组件来展示PDF内容。

以下是一个简单的示例代码：

<template>
  <div>
    <pdf-viewer :src="pdfUrl"></pdf-viewer>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      pdfUrl: null
    };
  },
  mounted() {
    axios.get('your-backend-api-url', {
      responseType: 'arraybuffer'
    }).then(response => {
      const blob = new Blob([response.data], { type: 'application/pdf' });
      this.pdfUrl = URL.createObjectURL(blob);
    });
  }
};
</script>

在上述示例中，通过发送GET请求到指定的后端API获取PDF文件流数据。然后，使用`Blob`对象创建URL地址，并将其赋值给组件中的`pdfUrl`变量。最后，将该变量传递给PDF预览组件进行渲染，从而实现PDF文件流在前端的预览。