js vue前端 blob 二进制文件流上传 下载 读取错误码

下载

下载二进制文件

export function fileDown(res){
    const disposition = res.headers['content-disposition'];
    let fileName = disposition.substring(disposition.indexOf("filename=")+9)
    fileName = decodeURIComponent(fileName);//解码文件名
    let data = res.data
    let url = window.URL.createObjectURL(new Blob([data],{type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"}))
    //创建一个a标签用于下载文件
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', fileName)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}

读取二进制错误码（根据业务情况，封装请求）

  return new Promise((resolve,reject)=>{
      const res = response.data
      // 响应类型为，二进制文件流
      if(response.request.responseType==='blob'){
        // 校验是否为二进制文本，如果是，解析文本错误信息返回，如果不是，则为二进制文件，进行下载
        var fr = new FileReader();
        fr.onload = function(e){
          try{
            let obj = JSON.parse(fr.result)
            if(!obj.code){
              //.....错误处理代码
            }
            reject(response)
          }catch{
            // 二进制文件，进行下载
            resolve(response)
          }
        }
        fr.readAsText(response.data);
      }
  })

上传

增加一个不可见的文件选择的input，然后用ref的方式模拟点击选择文件；accept属性可以配置上传文件的默认格式。

//上传excel文件
<input type="file" id="fileExport" ref="inputer" accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">

然后增加一个按钮，点击时，用ref激活input事件，开始选择文件

selectFile(){
      this.$refs.inputer.value = '';//每次点击时，重置文件，否则选择重复文件会监听不到onChang事件
      this.$refs.inputer.click();
      this.$refs.inputer.onchange = async (e)=>{
        let file = e.target.files[0];//拿到文件
        let types = ['application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
        let status = false;//是否满足类型上传限制
        types.map(item=>{
          if(item===file.type){
            status = true;
          }
        })
        if(!status){
          this.$toast('只能上传Excel文件类型！')
          return;
        }
        // let size = Math.floor(file.size / 1024);//计算文件的大小　
        let formData = new FormData();//new一个formData
        formData.append("file",file); //将file属性添加到formData里
        //此时formData就是我们要向后台传的参数了
        //...上传逻辑
}