axios下载进度api无法获取响应大小 BUG

axios 提供了监听上传/下载进度的事件: axios - Request Config

  // `onUploadProgress` allows handling of progress events for uploads
  // browser only
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

  // `onDownloadProgress` allows handling of progress events for downloads
  // browser only
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

可以看到他们的参数类型是相同的（ProgressEvent）

问题分析

参考：

onDownloadProgress has progressEvent.total property with zero value

axios的onDownloadProgress返回参数的total为0

axios ondownloadprogress中total总为零，content-length不返回

content-length首部缺失

第一种可能，响应头中的 content-length 缺失，后端没有返回，可在上面的监听方法中打印 progressEvent.srcElement.getResponseHeader('content-length') 验证。

解决方案：让后端补上

gzip

第二种可能，content-length 有返回，但响应经过了gzip编码(content-encoding: gzip)。在上面的监听方法中打印 progressEvent.loaded 会发现下载完成后，loaded值可能会远大于 content-length。

解决方案：

1. 关闭gzip
2. 后端把文件大小存储到其它响应首部字段上，例如：x-content-length，axios封装中，使用该值作为total计算进度。