new个blob来处理下文件流

最近很烦躁，接手了个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();
        }

文章永久链接：https://tech.souyunku.com/?p=42727