axios监控文件下载进度——react版本

const [progress, setProgress] = React.useState(0);

 

const onProgress = () => {

const downloadUrl = card.file_url;

axios({

   url:downloadUrl,

   responseType:'blob',

   method: 'GET',

   onDownloadProgress:(progressEvent) => {

      let percentComplete = progressEvent.loaded / progressEvent.total;

      setProgress(percentComplete*100)  //得到已完成比例

   }

   })

   .then((res)=>{

      const url=window.URL.createObjectURL(new Blob([res.data],{type:card.file_type}))  //将请求的内容下载，因为有一些文档直接会直接打开一个标签页而不是下载

      const link = document.createElement("a");

      link.download = card.file_name;

      link.href = url;

      link.click();

     })

    .catch((err)=>{

       console.log(err)

     })

  }

 

 

上传文件时使用onUploadProgress事件