axios文件下载上传进度监听

axios文件下载上传进度监听

exportFun(){
  let _that = this
  // 1. 创建Axios实例
  const instance = this.axios.create({
    onDownloadProgress: function(ProgressEvent) {
      const load = ProgressEvent.loaded;
      const total = ProgressEvent.total;
      const progress = (load / total) * 100;
      console.log(progress);
      bar.style.width=(progress) + "%";
      $("#total").html( Math.floor(progress) + "%");

      // 进度完成之后
      if(progress == 100){
        _that.$emit('exportDataFun',this.needData)
        _that.isDownLoad = false
      }
    } 
  });

  let ajaxUrl,fileName;
  if(this.isCanClick){
    let _that =this;
    _that.isCanClick = false;

    // 调用Axios实例
    instance({
      url: ajaxUrl,
      method: "post",
      data: this.needData,
      responseType: "blob" //  application/octet-stream
    }).then(res => {
      const data = res.data;
      let r = new FileReader();
      r.onload = function () {
        try {
          let resData = JSON.parse(this.result)
          console.log(resData)
          if (resData && resData['code'] && resData['code'] != '1000') {
            _that.$Message.info(resData.msg);
            _that.isDownLoad = false
          }
        } catch (err) {
          // 兼容ie11
          if (window.navigator.msSaveOrOpenBlob) {
            try {
              const blobObject = new Blob([data])
              window.navigator.msSaveOrOpenBlob(blobObject, fileName)
            } catch (e) {
              console.log(e)
            }
            return
          }
          this.download(data, fileName)
          alert('导出成功')
        }
      }
      r.readAsText(data) // FileReader的API
    }).catch(e => {
      let msg = "网络异常";
      alert(msg);
    })
  };