vue Element upload组件手动上传文件后处理后端返回文件流
action:上传文件的接口地址
vue
<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的内容由参数数组中给出的值的串联组成。
js
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对象
});
};
点击事件中触发手动上传
ini
uploadRef.value.submit();
要特别注意需要去配置responseType为blob
Blob 表示不可变、原始数据的类文件对象。当需要处理如图像、音频、视频等二进制数据时使用。响应体将被解析为一个 Blob
对象。
responseType 是在使用 XMLHttpRequest (XHR) 或 Fetch API 发起 AJAX 请求时设置的一个选项,用于指定期望从服务器接收到的响应数据类型。它会影响请求完成后如何解析响应体。这个属性通常在前端 JavaScript 中使用,特别是在异步数据加载、接口调用等场景。