前端解析文件流-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34664239/article/details/135604175

第一种方法，转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);
});