最近很烦躁，接手了个jsp+jquery+bootstrap+vue+element…..，一锅子乱炖，what the fuck…..
发完牢骚生活还得继续，能咋办呢，只能硬着头皮写了。
最近遇到一个功能，用户上传一个表格，前端把表格上传到后端，因为后端只是校验用户上传的表格，并不会保存在服务器，所以前端上传后，读取表格的内容校验格式，把处理的结果用流抛给前端。
好久没有使用ajax，忘记了ajax不支持流，所以得换回原生XMLHttpRequest的请求来上传文件，使用Blob处理返回的流。
代码如下：
const _data = new FormData();
_data.append("file", this.fileData.value);
_data.append("formId", this.formId);
this.uploadViewLoading = true;
var lastName = this.fileData.name.split('.')[0];
var url = "/admin/form/phone/excelAddPhone";//设置后台请求映射
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true); // 设置请求方式POST方式
xhr.responseType = "blob"; // 返回类型blob
// 请求回调函数，在请求后台完成，后台返回数据后执行此方法onload
xhr.onload = function () {
if (this.status != 200) {// 判断请求状态码，看请求是否成功执行
this.$message.error('导出失败！');
return;
}
var content = this.response; //获取后台响应内容
console.log(content)
if (content.type == 'application/json') {
//这段判断是应为如果文件有损坏或者内容为空，接口返回的是个json，而不是流，可以通过type来判断返回的格式
var reader = new FileReader();
reader.readAsText(content, 'utf-8');
reader.onload = function () {
var data = JSON.parse(reader.result);
if (data && data.ret == 0) {
_this.uploadViewStatus = false;
_this.$message.success('导入成功！');
_this.queryList();
} else {
_this.$message.error(data.msg);
}
}
} else if(content.type == 'multipart/form-data'){
//解析后台返回的文件内容，这里主要是处理Blob类型
var excelBlob = new Blob([content], { type: 'application/vnd.ms-excel' });
var fileName = lastName + '上传结果' + ".xlsx"; //
var link = document.createElement("a");
link.download = fileName;
link.style.display = "none";
link.href = URL.createObjectURL(excelBlob);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
_this.uploadViewStatus = false;
_this.$message.success('导入成功！');
_this.queryList();
}