前端结合 react axios 获取真实下载、上传进度

首页确保项目中使用了axios

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

点我查看 Axios Documention

 npm i axios
 yarn add axios

以下我们举例接口调用配置说明:

由于接口下载时,不确定文件下载时长,所以直接设置不限时

 timeout: -1,

由于 axios 已提供下载上传回掉函数(callback),所以我们直接调用就好

import { useState } from "react"type ProgressStatusType = "normal" | "active" | "success" | "exception"interface TestReportState {showProgressModal: booleandownloadPercent: numberdownloadStatus: ProgressStatusType
}const [showProgressModal,setShowProgressModal] = useState<boolean>(false)
const [downloadPercent,setDownloadPercent] = useState<number>(0)
const [downloadStatus,setDownloadStatus] = useState<ProgressStatusType>("normal")// 外层调用
const downloadFile = async (filename: string): Promise<void> => {try {setShowProgressModal(true)setDownloadStatus("active")const res = await downLoadFileTemp({ filename }, state)setDownloadStatus("success")downloadFileAction(filename, res)} catch (error) {setDownloadStatus("exception")console.error("downloadFile->", error)}
}export const downLoadFile = (params: { filename: string }, setDownloadPercent:()=>void ): Promise<Blob> => {return get(`api/getFile?${qs.stringify(params)}`, {timeout: -1, // 不限时onDownloadProgress: (progressEvent: ProgressEvent) => {setDownloadPercent(calcProgress(progressEvent)) },onUploadProgress:  (progressEvent: ProgressEvent) => {// Do whatever you want with the Axios progress event},})
}

为了提高代码互用性与可维护性所以将计算进度的逻辑做了封装

/*** 计算进度条百分比*/
export const calcProgress = (progressEvent: ProgressEvent): number => {const { loaded = 0, total = 0 } = progressEvent || {}return Math.ceil((loaded / total) * 100) || 0
}

你可能有疑惑 progressEvent 中所含有的字段,请看以下示例:


/*** Events measuring progress of an underlying process, like an HTTP request (for an XMLHttpRequest, or the loading of the underlying resource of an <img>, <audio>, <video>, <style> or <link>).** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ProgressEvent)*/
interface ProgressEvent<T extends EventTarget = EventTarget> extends Event {/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ProgressEvent/lengthComputable) */readonly lengthComputable: boolean;/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ProgressEvent/loaded) */readonly loaded: number;readonly target: T | null;/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ProgressEvent/total) */readonly total: number;
}

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

  1. 后端在header中加上content-length
  2. 如果使用了Gzip做了文件分块获取到的 content-length 也可能是不准确的,所以可以让后端将此信息新建一个字段解决 例如:
response header {...custom-content-length: 2040
}

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

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

相关文章

AIX系统下挂载ISO镜像

我们需要将AIX的iso文件作为软件包的安装源挂载的系统目录中 首先我们查看系统下有哪些挂载文件 如何挂载一个系统iso镜像文件 loopmount -i /ftp/iso/LK4T_1807_11.iso -o "-V cdrfs -o ro " -m /mnt/iso 需要安装软件直接执行smit就可以了&#xff0c;在smit中…

phpStudy安装thinkCMF8时,如何解决服务器rewrite和APIrewrite不支持的问题

解决步骤&#xff1a; 一&#xff1a;服务器rewrite 点击后面的问号跳转到官方文档链接&#xff1a; 复制红框内的代码 打开phpstudy&#xff0c;找到配置的站点&#xff0c;点击管理&#xff0c;找到伪静态 点击确认保存即可。 phpstudy会自动重启站点。 此时&#xff0c;…

内网信息收集

本机信息收集 一、手工 1.查询网络配置信息: ipconfig /all 2. 查询操作系统和版本信息: systeninfo 查看系统体系架构&#xff1a;echo %PROCESSOR_ARCHITECTURE% 查看安装的软件及版本信息&#xff1a; wmic product get name,version 3.查询本机服务信息&#…

docker init 生成Dockerfile和docker-compose.yml —— 筑梦之路

官网&#xff1a;https://docs.docker.com/engine/reference/commandline/init/ 简介 docker init是一个命令行实用程序&#xff0c;可帮助初始化项目中的 Docker 资源。.dockerignore它根据项目的要求创建 Dockerfile、Compose 文件。这简化了为项目配置 Docker 的过程&#…

【NLP9-Transformer经典案例】

Transformer经典案例 1、语言模型 以一个符合语言规律的序列为输入&#xff0c;模型将利用序列间关系等特征&#xff0c;输出在一个在所有词汇上的概率分布&#xff0c;这样的模型称为语言模型。 2、语言模型能解决的问题 根据语言模型定义&#xff0c;可以在它的基础上完成…

PHP反序列化---字符串逃逸(增加/减少)

一、PHP反序列化逃逸--增加&#xff1a; 首先分析源码&#xff1a; <?php highlight_file(__FILE__); error_reporting(0); class A{public $v1 ls;public $v2 123;public function __construct($arga,$argc){$this->v1 $arga;$this->v2 $argc;} } $a $_GET[v…

探索区块链世界:从加密货币到去中心化应用

相信提到区块链&#xff0c;很多人会想到比特币这样的加密货币&#xff0c;但实际上&#xff0c;区块链技术远不止于此&#xff0c;它正在深刻地改变我们的生活和商业。 首先&#xff0c;让我们来简单了解一下什么是区块链。区块链是一种分布式数据库技术&#xff0c;它通过将…

三维GIS仿真技术发展的几点思考

随着近几年三维GIS的快速发展&#xff0c;三维GIS可视化在数字孪生、元宇宙等热点方向起着重要技术支撑&#xff0c;结合这几年三维GIS技术进展,其出现的进展与问题&#xff0c;有以下几点思考&#xff0c;供读者参考&#xff1a; 1.关于国内GIS三维仿真技术处于什么水平&#…

蓝桥杯-python-递归

递归&#xff1a;通过自我调用解决问题的函数 注意&#xff1a; #1.递归出口 #2.当前问题如何变成子问题 例子&#xff1a;利用递归写一个阶乘函数&#xff0c;F(n),求n的阶乘 def f(n):if n < 1:return 1ans n * f(n-1)return ans print(f(5)) 例子&#xff1a;汉诺塔…

vsto excel 插件注册表属性值含义

在 VSTO (Visual Studio Tools for Office) 中&#xff0c;LoadBehavior 是用于指定 Office 插件加载行为的一个属性。具体含义如下&#xff1a; - LoadBehavior 0&#xff1a;此值表示插件已被禁用&#xff0c;将不会加载。 - LoadBehavior 1&#xff1a;此值表示插件将在 O…

【CSP试题回顾】202303-1-田地丈量

CSP-202303-1-田地丈量 解题思路 问题描述&#xff1a;给定一个长为 a、宽为 b 的矩形区域&#xff08;坐标范围从 (0,0) 到 (a,b)&#xff09;&#xff0c;以及 n 个其他矩形&#xff0c;每个矩形由其对角线的两个顶点 (x1, y1) 和 (x2, y2) 定义。需要计算这些矩形与给定矩形…

深度刨析Android ANR触发原理

一、概述 ANR(Application Not responding)&#xff0c;是指应用程序未响应&#xff0c;Android系统对于一些事件需要在一定的时间范围内完成&#xff0c;如果超过预定时间能未能得到有效响应或者响应时间过长&#xff0c;都会造成ANR。一般地&#xff0c;这时往往会弹出一个提…

015 Linux_生产消费模型

​&#x1f308;个人主页&#xff1a;Fan_558 &#x1f525; 系列专栏&#xff1a;Linux &#x1f339;关注我&#x1f4aa;&#x1f3fb;带你学更多操作系统知识 文章目录 前言一、生产消费模型&#xff08;1&#xff09;概念引入&#xff08;2&#xff09;生产消费模型的优点…

键牌 6寸水口钳工业级电子斜嘴水口剪偏口钳子电工专用小斜口钳

品牌&#xff1a;键牌 型号&#xff1a;6寸水口钳灰红 材质&#xff1a;不锈钢 颜色分类&#xff1a;6寸水口钳灰红 多用途电工钳&#xff0c;高硬度&#xff0c;韧性好&#xff0c;材质优。 匠心之作&#xff0c;精工典范&#xff0c;不锈钢材质&#xff0c;加厚刀刃&am…

JAVA学习-NIO.Buffer(缓冲器)

Java NIO中的缓冲器&#xff08;Buffer&#xff09;是用来存储数据的对象。它是一个固定大小的数组&#xff0c;可以容纳特定类型的数据。 一、Java NIO中提供了7种类型的缓冲器&#xff0c;分别是&#xff1a; 1. ByteBuffer&#xff1a; 字节缓冲器&#xff0c;用来存储字…

解决 ArrayList 的并发问题

目录 1. 场景复现1.1 数据不一致问题示例代码1.2 ConcurrentModificationException 问题示例代码 2. 解决并发的三种方法2.1 使用 Collections.synchronizedList2.2 使用 CopyOnWriteArrayList&#xff08;推荐使用&#xff09;2.3 使用显式的同步控制 3. 总结 ArrayList是java…

【JavaWeb】Spring非阻塞通信 - Spring Reactive之WebFlux的使用

【JavaWeb】Spring非阻塞通信 - Spring Reactive之WebFlux的使用 文章目录 【JavaWeb】Spring非阻塞通信 - Spring Reactive之WebFlux的使用参考资料一、初识WebFlux1、什么是函数式编程1&#xff09;面向对象编程思维 VS 函数式编程思维&#xff08;封装、继承和多态描述事物间…

Magical Combat VFX 2

我们为Unity推出的最新资产包:魔法战斗VFX包!这个包非常适合为你的游戏添加激烈而致命的魔法。有30多种独特的效果,包括血液、酸和毒咒,你可以在战斗场景中大显身手。而且移动支持和优化是首要任务,你可以在旅途中使用这些效果,而不用担心性能问题。使用功能齐全、移动就…

【 React 】React render方法的原理?在什么时候会被触发?

1. 原理 首先&#xff0c;render函数在react中有两种形式&#xff1a; 在类组件中&#xff0c;指的是render方法&#xff1a; class Foo extends React.Component {render() {return <h1> Foo </h1>; } }在函数组件中&#xff0c;指的是函数组件本身&#xff1a…

windows11安装SQL server数据库报错等待数据库引擎恢复句柄失败(二)

windows11安装SQL server数据库报错等待数据库引擎恢复句柄失败&#xff08;二&#xff09;&#xff0c;昨天在给网友远程的时候发现了一个新的问题。 计算机系统同样是Windows11&#xff0c;通过命令查出来的扇区相关结果也都是4096&#xff0c;但是最后的安装还是提示SQL ser…