IE浏览器,文件下载失败,onDownloadProgress方法里报错:无法获取未定义或null引用的属性“getResponseheader“

news2024/11/20 18:34:21

问题背景:

谷歌、火狐、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') 方法获取就行了。

问题解决。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1624092.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OpenWRT设置自动获取IP,作为二级路由器

前言 上一期咱们讲了在OpenWRT设置PPPoE拨号的教程,在光猫桥接的模式下,OpenWRT如果不设置PPPoE拨号,就无法正常上网。 OpenWRT设置PPPoE拨号教程 但现在很多新装的宽带,宽带师傅为了方便都会把光猫设置为路由模式。如果你再外…

SpringCloud系列(15)--Eureka自我保护

前言:在上一章节中我们说明了一些关于Eureka的服务发现功能,也用这个功能进行接口的实现,在本章节则介绍一些关于Eureka的自我保护 1、Eureka保护模式概述 保护模式主要用于一组客户端和Eureka Server之间存在网络分区场景下的保护。默认情况…

带你走进不一样的策略模式

欢迎来到我的博客,代码的世界里,每一行都是一个故事 带你走进不一样的策略模式 前言策略模式简介概念解释 策略模式的结构策略模式优点项目实践之bean策略构思业务策略实现策略接口实现策略上下文业务实现 前言 在编程的世界里,每一次按键都…

Golang对接Ldap(保姆级教程:概念搭建实战)

Golang对接Ldap(保姆级教程:概念&搭建&实战) 最近项目需要对接客户的LDAP服务,于是趁机好好了解了一下。LDAP实际是一个协议,对应的实现,大家可以理解为一个轻量级数据库。用户查询。比如&#xff…

高频前端面试题汇总之Vue篇

1. Vue的基本原理 当一个Vue实例创建时,Vue会遍历data中的属性,用 Object.defineProperty(vue3.0使用proxy )将它们转为 getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。 每个组件实…

【ruoyi-vue】登录解析(后端)

调试登录接口 进入实现类可以有 验证码校验 登录前置校验 用户验证 验证码校验 通过uuid获取redis 中存储的验证码信息,获取后对用户填写的验证码数据进行校验比对 用户验证 1.进入控制器的 /login 方法 2.进入security账号鉴权功能,经过jar内的流…

算法-动态规划专题

文章目录 前言 : 动态规划简述1 . 斐波那契模型1.1 泰波那契数列1.2 最小花费爬楼梯1.3 解码方法 前言 : 动态规划简述 动态规划在当前我们的理解下,其实就是一种变相的递归,我们查看一些资料也可以知道,动态规划其实属于递归的一个分支,通过把递归问题开辟的栈帧通过一定的手…

代码随想录第45天|70. 爬楼梯 (进阶)322. 零钱兑换

70. 爬楼梯 &#xff08;进阶&#xff09; 57. 爬楼梯&#xff08;第八期模拟笔试&#xff09; (kamacoder.com) 代码随想录 (programmercarl.com) 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬至多m (1 < m < n)个台阶。你有多少种不同的方法可以爬到楼顶…

企业数字化转型,“业务”先行

在当今时代&#xff0c;数字化转型已经成为企业发展的必经之路。数字化转型&#xff0c;简而言之&#xff0c;就是运用数字技术&#xff0c;对企业运营管理的各个环节进行深度改造&#xff0c;以提升企业的运营效率和市场竞争力。据有关机构研究测算&#xff0c;数字化转型可使…

【静态分析】静态分析笔记07 - 指针分析基础

参考&#xff1a; 【课程笔记】南大软件分析课程7——指针分析基础&#xff08;课时9/10&#xff09; - 简书 -------------------------------------------------------------- 1. 指针分析规则 规则&#xff1a;采用推导形式&#xff0c;横线上面是条件&#xff0c;横线下…

Linux开发板配置静态IP

1、查看网口信息&#xff0c;易知eth0无IP地址 ifconfig2、首先分配一个IP地址 sudo ifconfig eth0 192.168.5.8 up3、此时配置的IP地址只是临时的&#xff0c;当你reboot重启板子上电后&#xff0c;ip地址会消失&#xff0c;因此需要为板子配置静态ip&#xff0c;避免每次上…

说方法不如传授经验向媒体投稿你可以这样

在信息爆炸的时代,作为单位的信息宣传员,肩负着将本单位的重要资讯、活动成果、政策解读等内容有效传播至公众视野的重任。其中,向各类媒体投稿无疑是实现这一目标的重要途径。然而,传统的邮件投稿方式常常让我深感力不从心,费时费力不说,成功率低、出稿慢等问题更是让我和领导…

SQL注入简单总结

一、SQL注入是什么 SQL注入即&#xff1a;是指web应用程序对用户输入数据的合法性没有判断或过滤不严&#xff0c;攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句&#xff0c;在管理员不知情的情况下实现非法操作&#xff0c;以此来实现欺骗数据库服…

【论文推导】基于有功阻尼的转速环PI参数整定分析

前言 在学习电机控制的路上&#xff0c;PMSM的PI电流控制是不可避免的算法之一&#xff0c;其核心在于内环电流环、外环转速环的设置&#xff0c;来保证转速可调且稳定&#xff0c;并且保证较好的动态性能。整个算法仿真在《现代永磁同步电机控制原理及matlab仿真》中已详细给出…

前端项目中使用插件prettier/jscodeshift/json-stringify-pretty-compact格式化代码或json数据

同学们可以私信我加入学习群&#xff01; 正文开始 前言一、json代码格式化-选型二、json-stringify-pretty-compact简单试用三、prettier在前端使用四、查看prettier支持的语言和插件五、使用prettier格式化vue代码最终效果如图&#xff1a; ![在这里插入图片描述](https://im…

3.8设计模式——State 状态模式(行为型)

意图 允许一个对象在其内部状态改变时改变它的行为。对象看起来似乎修改了它的类。 结构 Context&#xff08;上下文&#xff09;定义客户感兴趣的接口&#xff1b;维护一个ConcreteState子类的实例&#xff0c;这个实例定义当前状态。State&#xff08;状态&#xff09;定义…

[x86] OpenBMC简介

什么是 OpenBMC&#xff1f; OpenBMC 被设计为一个完整的开源 Linux 发行版&#xff0c;可以灵活地进行定制以支持不同的 SoC 或主板。 传统的BMC由固件提供商专有构建&#xff0c;是闭源的&#xff0c;这意味着它不具有在开放平台上修改的灵活性。 另一方面&#xff0c;OpenB…

链栈的基本操作(c语言实现)

栈的概念 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 栈的结构 定义栈…

做抖音小店,“自然流量”和“达人带货”,选择哪个更香?

大家好&#xff0c;我是电商笨笨熊 做抖音小店&#xff0c;关于选择自然流还是达人带货&#xff0c;从推出时就一直争吵到现在&#xff1b; 有人觉得自然流不需要佣金&#xff0c;一次性带来的爆单量很大&#xff1b; 有人觉得达人带货细水长流&#xff0c;虽然需要佣金&…

Docker 网络与资源控制

一 Docker 网络实现原理 Docker使用Linux桥接&#xff0c;在宿主机虚拟一个Docker容器网桥(docker0)&#xff0c;Docker启动一个容器时会根 据Docker网桥的网段分配给容器一个IP地址&#xff0c;称为Container-IP&#xff0c;同时Docker网桥是每个容器的默 认网关。因为在同…