el-upload手动上传处理后端返回文件流

vue Element upload组件手动上传文件后处理后端返回文件流

action：上传文件的接口地址

  <el-upload
    ref="uploadRef"
    v-model:file-list="fileList"
    :action="Url"
    :auto-upload="false"
    :http-request="httpRequest"
  >
    <el-button type="primary">
      <el-icon><Upload /></el-icon>上传文件
    </el-button>
  </el-upload>

手动上传将auto-upload设置为false，重写默认的xhr上传方法，即配置http-request。

header里携带token：token在登录成功之后，后端返回给前端的，可以存在localStorage、cookies、vuex状态管理。
对二进制文件流的解析下载(用new Blob() 处理文件流)。Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成。

import { Upload } from '@element-plus/icons-vue';
import { ref } from 'vue';
import axios from 'axios';

const uploadRef = ref();

const httpRequest = item => {
  let formData = new FormData();
  formData.append('file', item.file);

  axios({
    url: Url,
    method: 'POST',
    responseType: 'blob',
    data: formData,
    'Content-Type': 'application/json',
    headers: headers,
  }).then(res => {
    // 处理res,进行下载,这里下载的是excel文件
      let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
      let downloadElement = document.createElement('a');
      let href = window.URL.createObjectURL(blob); //创建下载的链接
      downloadElement.href = href;
      downloadElement.download = 'fileName.xlsx'; //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      window.URL.revokeObjectURL(href); //释放掉blob对象
  });
};

点击事件中触发手动上传

uploadRef.value.submit();

要特别注意需要去配置responseType为blob

Blob 表示不可变、原始数据的类文件对象。当需要处理如图像、音频、视频等二进制数据时使用。响应体将被解析为一个 Blob 对象。

responseType 是在使用 XMLHttpRequest (XHR) 或 Fetch API 发起 AJAX 请求时设置的一个选项，用于指定期望从服务器接收到的响应数据类型。它会影响请求完成后如何解析响应体。这个属性通常在前端 JavaScript 中使用，特别是在异步数据加载、接口调用等场景。

原文链接：https://juejin.cn/post/7355375770314178600 作者：阿博阿博