前端解析文件流

第一种方法，转blob对象

this.$axios({
  url: `/md2api/attachment/c/${val.code}`,
  method: "GET",
  responseType: 'blob',   //设置响应格式
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
})
.then(function (response) {
  let b = new Blob([response.data]);     //拿到文件流下载对象
  let url = window.URL.createObjectURL(b);  //生成文件流下载链接
  let a = document.createElement('a');      //创建一个a标签用来跳转
  a.href = url;                             // a标签 href  赋值 链接  
  a.download = 'ing.jpeg';                  //设置下载文件的文件名和文件格式
  document.body.appendChild(a);             //将标签DOM，放置页面
  a.click();                              
  window.URL.revokeObjectURL(url);     //释放 url 对象内存
  document.body.removeChild(a);        //移除标签节点
})
.catch(function (error) {
  console.log(error);
});

第二种方法（采用 FileReader 实例对象调用Api ，处理文件流）

this.$axios({
  url: `/md2api/attachment/c/${val.code}`,
  method: "GET",
  responseType: 'blob',   //设置响应格式
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
})
.then(function (response) {
  const reader = new FileReader();   //  实例化 FileReader
  reader.readAsDataURL(response.data); //将读取到的文件编码成DataURL
  reader.onload = (e) => {      //调用API onload  文件读取成功时触发   
    //模拟a标签点击
    let a = document.createElement('a');   //创建a标签，
    a.download = Date.parse(new Date()) + '.jpeg';   //设置格式
    a.href = e.target.result;               //下载文件流链接
    document.body.appendChild(a);           //将标签DOM，放置页面
    a.click();
    document.body.removeChild(a);          //移除标签节点
  };
   reader.onerror = (e) => {
    this.$message({
      message: '解析文件发生错误',
      type: 'warning'
    });
   };
   reader.onabort= (e) => {
    this.$message({
      message: '解析文件发生意外终止',
      type: 'warning'
    });
  }
 })
.catch(function (error) {
    console.log(error);
});

FileReader 对象

FileReader 对象 常用 API 回调函数

API 描述
onload 文件读取成功时触发
onerror 解析文件发生错误时触发
onabort 解析文件发生意外终止时触发
onloadend 文件读取完毕之后，成功或者失败都会触发
onloadstart 开始读取时触发
onprogress 读取时触发

FileReader 常用的 API 数据处理钩子函数

API 描述
readAsText() 读取文本文件
readAsBinaryString() 读取任意类型的文件，返回二进制字符串
readAsDataURL() 将读取到的文件编码成 DataURL
abort() 终止读取