1、el-upload上传excel后返回流文件并进行下载处理
elementUI中 el-upload不支持配置responseType: “blob”,所以需要使用el-upload中的http-request进行自定义上传接口请求。
<el-upload
:http-request="uploadExcel"
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<span>仅允许导入xls、xlsx格式文件。</span>
</div>
</el-upload>
uploadExcel(data) {
var _this = this;
let params = new FormData();
params.append("file", data.file);
axios
.post('接口', params, {
responseType: "blob",
headers: {
"Content-Type": "application/json",
Authorization: 'token',//token
},
})
.then((response) => {
//判断是否导入成果
if (response.data.type == "application/json") {
//导入成功
} else {
//导入失败返回流文件
_this
.$confirm("确定要导出失败的数据吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
const blob = new Blob([response.data]);
const a = document.createElement("a");
const url = window.URL.createObjectURL(blob);
const filename = Date.parse(new Date()) + ".xlsx";
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
})
.catch(() => {});
}
})
.catch((error) => {
console.log(error);
});
},