前端怎么展示后端传回前端的文件element

在前端展示后端传递回来的文件，通常使用Element UI库的话，可以按照以下步骤操作：

1. 首先，你需要从后端API获取文件数据，这通常是作为`Blob`、`File`对象或者是URL形式。

2. 如果是`Blob`或`File`对象，你可以将其转换为一个URL以便于浏览器下载或预览。例如，对于`File`对象，可以使用`URL.createObjectURL(file)`创建一个临时URL。

   const file = ...; // 后端返回的File对象
   const url = URL.createObjectURL(file);

3. 使用Element UI的`el-upload`组件，设置`responseType`为`blob`或`arraybuffer`，然后处理`onSuccess`回调，将文件URL显示出来。如果需要直接预览，可以用`el-preview`组件展示图片，或者使用第三方库如`vue-file-preview`来预览其他类型的文件。

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="beforeUpload"
    :response-type="responseType"
    :on-success="handleSuccess"
  >
    <el-button>点击上传</el-button>
  </el-upload>
  <!-- 或者 -->
  <el-preview
    v-if="fileUrl"
    :url="fileUrl"
    style="width: 200px;height: 200px;"
  ></el-preview>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: '',
      responseType: 'blob', // 或 'arraybuffer'
    };
  },
  methods: {
    beforeUpload(file) {
      // 这里可以添加文件大小限制或其他验证逻辑
    },
    handleSuccess(response, file) {
      if (response.type === 'blob') {
        this.fileUrl = URL.createObjectURL(response);
      } else if (ArrayBuffer.isView(response)) {
        // 对于非 Blob 类型的数据，自行处理
      }
    },
  },
};
</script>