问题背景:
谷歌、火狐、edge都没有问题,ie11浏览器也没有问题,ie10及以下会报错,无法获取未定义或null引用的属性"getResponseheader
查看代码,getResponseHeader这个方法是在获取进度条的时候使用,
//xml返回数据的钩子函数,可以用来获取数据的进度 具体可查看axios的官网
onDownloadProgress: progressEvent => {
//progressEvent.loaded 下载文件的当前大小
//progressEvent.total 下载文件的总大小 如果后端没有返回 请让他加上!
let progressBar = Math.round((progressEvent.loaded / progressEvent.srcElement.getResponseHeader('x-content-length')) * 100);
// ...其他逻辑操作
}
在ie10浏览器下,控制台打印 progressEvent 对象,发现 progressEvent.srcElement 为null,其他版本的浏览器 progressEvent.srcElement 是有值的,并且可以通过 getResponseHeader() 获取到响应头里的值。
修改后:使用 progressEvent?.target?.getResponseHeader() 方法获取,x-content-length需要后端接口设置在响应头中。问题解决
let progressBar = Math.round((progressEvent.loaded / progressEvent?.target?.getResponseHeader('x-content-length')) * 100);
这里说一下为什么不使用 progressEvent.total 或者 content-length 来获取下载文件的总大小?
因为当开启了gzip之后,这两个值是有问题的。影响进度条的准确性,可以和后台约定好一个字段,比如 x-content-length 返回文件总大小,然后通过 progressEvent.target.getResponseHeader('x-content-length') 方法获取就行了。
问题解决。