axios进度条功能onDownloadProgress函数total参数为undefined问题

问题描述

• 使用axios发请求，想要实现一个请求的结果进度
• 比如当网络慢的情况，或者某个请求返回的数据量比较大的情况等
• 最常见的就是下载一个大文件，要查看大文件下载的进度
• axios的onDownloadProgress函数已经帮我们封装好了
• 是基于原生的ProgressEvent套壳子的

比如我们下载一个流文件，要呈现下载的进度，在这里打印一下进度事件

axios({
    method: "get",
    responseType: "blob", // 流文件为blob类型
    url: "http://ashuai.work:10000/getDoc",
    onDownloadProgress(ProgressEvent) {
        console.log('进度事件', ProgressEvent);
    }
}).then(({ data }) => {
    console.log('接口请求完成',data);
});

打印结果如下图：

这里为何拿不到total的值？

• 是因为接口的响应头，没有返回Content-Length属性
• 所以ProgressEvent就拿不到这个值，所以就没有total的值，就为undefined

请看响应头

Content-Length 大家可以简要理解成为一个接口返回的内容的总大小，单位字节，我们知道了某个时刻loaded多少字节，知道总字节，就可以得出百分比了

解决方案

让后端在响应头上加上Content-Length即可

让后端在响应头上加上Content-Length即可

让后端在响应头上加上Content-Length即可

笔者这里使用express演示一下代码：

route.get('/getDoc', (req, res) => {
  res.header('Access-Control-Allow-Origin', '*');
  
  // fs.statSync读取文件信息，读取当前目录下的study.docx文件
  let docxUrl = './doc/study.docx'
  const Myfilesize = fs.statSync(docxUrl).size // 拿到文件字节大小
  // 设置请求头
  res.writeHead(200, {
    'Content-Type': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'content-length': Myfilesize // 加上即可
  })
  
  let readStream = fs.createReadStream(docxUrl) // 流文件pipe管道返回
  readStream.pipe(res);
})

加上以后，响应头就有Content-Length了，就能正常了

这样的话，进度条效果也就有了

流文件请求手动加上，普通的请求会自带Content-Length的

代码附上

    
    
    
    
    



    点击预览word文件
    

     0