使用axios 封装大文件上传,支持断点续传的功能
使用 Axios 实现断点续传、重试、暂停、开始和上传进度功能
简介
在许多应用程序中,我们经常需要上传大文件。但是,由于网络连接不稳定或其他原因,上传过程可能会中断。为了解决这个问题,我们可以使用断点续传功能。断点续传允许我们在上传中断后从中断处继续上传文件,而无需重新上传整个文件。
除了断点续传,我们还可以使用重试、暂停和开始功能来更好地控制上传过程。重试功能允许我们在上传失败时自动重试上传。暂停功能允许我们暂停正在进行的上传。开始功能允许我们开始新的上传。
此外,我们还可以使用上传进度功能来实时跟踪上传进度。这对于大文件上传非常有用,因为它可以让我们知道上传的进展情况。
实现
我们可以使用 Axios 库来轻松实现断点续传、重试、暂停、开始和上传进度功能。Axios 是一个流行的 JavaScript 库,它可以帮助我们轻松地发送 HTTP 请求。
首先,我们需要安装 Axios 库。我们可以使用以下命令来安装 Axios:
npm install axios
安装完成后,我们就可以在我们的代码中使用 Axios 了。
以下是如何使用 Axios 实现断点续传、重试、暂停、开始和上传进度功能的示例代码:
import axios from 'axios';// 断点续传
const resumeUpload = (file, chunkSize, fileId, endpoint) => {// 获取已上传的字节数const uploadedBytes = file.slice(0, chunkSize).byteLength;// 创建一个新的 FormData 对象const formData = new FormData();// 将文件块添加到 FormData 对象中formData.append('file', file.slice(uploadedBytes));// 将文件 ID 和已上传的字节数添加到 FormData 对象中formData.append('fileId', fileId);formData.append('uploadedBytes', uploadedBytes);// 发送请求以继续上传文件return axios.post(endpoint, formData, {headers: {'Content-Type': 'multipart/form-data',},});
};// 重试
const retryUpload = (file, chunkSize, fileId, endpoint) => {// 获取已上传的字节数const uploadedBytes = file.slice(0, chunkSize).byteLength;// 创建一个新的 FormData 对象const formData = new FormData();// 将文件块添加到 FormData 对象中formData.append('file', file.slice(uploadedBytes));// 将文件 ID 和已上传的字节数添加到 FormData 对象中formData.append('fileId', fileId);formData.append('uploadedBytes', uploadedBytes);// 发送请求以重试上传文件return axios.post(endpoint, formData, {headers: {'Content-Type': 'multipart/form-data',},});
};// 暂停
const pauseUpload = () => {// 取消正在进行的上传请求axios.cancel();
};// 开始
const startUpload = (file, chunkSize, endpoint) => {// 创建一个新的 FormData 对象const formData = new FormData();// 将文件块添加到 FormData 对象中formData.append('file', file.slice(0, chunkSize));// 发送请求以开始上传文件return axios.post(endpoint, formData, {headers: {'Content-Type': 'multipart/form-data',},});
};// 上传进度
const uploadProgress = (progressEvent) => {// 计算上传进度const progress = (progressEvent.loaded / progressEvent.total) * 100;// 更新进度条document.getElementById('progress-bar').value = progress;
};
使用示例:
// 文件对象
const file = document.getElementById('file-input').files[0];// 块大小(以字节为单位)
const chunkSize = 1024 * 1024; // 1MB// 文件 ID(唯一标识符)
const fileId = '1234567890';// 端点 URL
const endpoint = 'https://example.com/upload';// 开始上传文件
startUpload(file, chunkSize, endpoint).then((response) => {// 获取文件 IDconst fileId = response.data.fileId;// 上传文件块for (let i = 1; i < Math.ceil(file.size / chunkSize); i++) {// 获取文件块const fileChunk = file.slice(i * chunkSize, (i + 1) * chunkSize);// 上传文件块resumeUpload(fileChunk, chunkSize, fileId, endpoint).then((response) => {// 更新上传进度uploadProgress(response.data.progress);}).catch((error) => {// 重试上传文件块retryUpload(fileChunk, chunkSize, fileId, endpoint);});}}).catch((error) => {// 处理错误console.error(error);});// 暂停上传文件
document.getElementById('pause-button').addEventListener('click', () => {pauseUpload();
});
相关文章:
使用axios 封装大文件上传,支持断点续传的功能
使用 Axios 实现断点续传、重试、暂停、开始和上传进度功能 简介 在许多应用程序中,我们经常需要上传大文件。但是,由于网络连接不稳定或其他原因,上传过程可能会中断。为了解决这个问题,我们可以使用断点续传功能。断点续传允许…...
在python中,设置json支持中文字符串
# 省略以上环节 ... # 假设json格式如下 system_info_dict {uptime: uptime.split(".")[0],cpu_usage: cpu_usage,memory_usage: memory_usage,disk_usage: disk_usage,battery_percentage: battery_percentage,battery_status: batteryStatus }# 设置json支持中文字…...
qnx du统计目录大小单位
在qnx上使用du命令统计目录大小时,发现统计数值与实际大小不一样。 比如目录下有个已知1gb大小的问题,但du统计出来的值跟1gb差太多了 # ls -al total 2097169 drwxrwxrwx 2 root root 4096 Jan 01 00:21 . drwxrwxrwx 6 root …...
测试人员如何向开发人员准确清晰地描述问题?
测试人员向开发人员准确清晰地描述问题可以采取以下方法: 提供详细的背景和上下文信息:描述问题发生的环境、前提条件和操作步骤,让开发人员能够了解问题出现的场景。明确问题的症状和表现:清楚地说明问题的具体表现,…...

何恺明新作 l-DAE:解构扩散模型
何恺明新作 l-DAE:解构扩散模型 提出背景扩散模型步骤如何在不影响数据表征能力的同时简化模型?如何进一步推动模型向经典DAE靠拢?如何去除对生成任务设计的DDM中不适用于自监督学习的部分?如何改进DDM以专注于清晰图像表示的学习…...

【数学建模获奖经验】2023第八届数维杯数学建模:华中科技大学本科组创新奖获奖分享
2024年第九届数维杯大学生数学建模挑战赛将于:2024年5月10日08:00-5月13日09:00举行,近期同学们都开始陆续进入了备赛阶段,今天我们就一起来看看上一届优秀的创新奖选手都有什么获奖感言吧~希望能帮到更多热爱数学建模的同学。据说点赞的大佬…...

Kubernetes(k8s第二部分)
资源清单相当于剧本 什么是资源: k8s中所有的内容都抽象为资源,资源实例化后,叫做对象。 1.K8S中的资源 集群资源分类 名称空间级别: kubeadm k8s kube-system kubectl get pod -n default 工作负载型资源,&a…...
mac新环境
1、maven 设置阿里云镜像 打开Maven的settings.xml文件。找到<mirrors>标签,如果没有,可以手动添加。在<mirrors>标签内部添加以下内容: <mirror> <id>nexus-aliyun</id> <mirrorOf>*</mirrorO…...
神经网络基础知识:LeNet的搭建-训练-预测
1.参考视频: 2.1 pytorch官方demo(Lenet)_哔哩哔哩_bilibili 2.总结: (1)LeNet网络就是 我最开始用来预测mnist数据集的那个网络,简单的2个conv2个maxpool3个linear层 (2)up主整理的train.py…...

SpringMVC 学习(七)之报文信息转换器 HttpMessageConverter
目录 1 HttpMessageConverter 介绍 2 RequestBody 注解 3 ResponseBody 注解 4 RequestEntity 5 ResponseEntity 6 RestController 注解 1 HttpMessageConverter 介绍 HttpMessageConverter 报文信息转换器,将请求报文(如JSON、XML、HTML等&#x…...

浅谈密码学
文章目录 每日一句正能量前言什么是密码学对称加密简述加密语法Kerckhoffs原则常用的加密算法现代密码学的原则威胁模型(按强度增加的顺序) 密码学的应用领域后记 每日一句正能量 人生在世,谁也不能做到让任何人都喜欢,所以没必要…...

Android 混淆是啥玩意儿?
什么是混淆 Android混淆,是伴随着Android系统的流行而产生的一种Android APP保护技术,用于保护APP不被破解和逆向分析。简单的说,就是将原本正常的项目文件,对其类、方法、字段,重新命名a,b,c…之类的字母,…...

【嵌入式——QT】QListWidget
QListWidget类提供了一个基于项的列表小部件,QListWidgetItem是列表中的项,该篇文章中涉及到的功能有添加列表项,插入列表项,删除列表项,清空列表,向上移动列表项,向下移动列表项。 常用API a…...

爬虫入门到精通_基础篇5(PyQuery库_PyQuery说明,初始化,基本CSS选择器,查找元素,遍历,获取信息,DOM操作)
1 PyQuery说明: PyQuery是python中一个强大而又灵活的网页解析库,如果你觉得正则写起来太麻烦,又觉得BeautifulSoup语法太难记,如果你熟悉jQuery的语法那么,PyQuery就是你绝佳的选择。 安装 pip3 install pyquery2 …...

用冒泡排序模拟C语言中的内置快排函数qsort!
目录 编辑 1.回调函数的介绍 2. 回调函数实现转移表 3. 冒泡排序的实现 4. qsort的介绍和使用 5. qsort的模拟实现 6. 完结散花 悟已往之不谏,知来者犹可追 创作不易,宝子们!如果这篇文章对你们有帮助的话,别忘了给个免…...

智慧公厕:打造智慧城市环境卫生新标杆
随着科技的不断发展和城市化进程的加速推进,智慧城市建设已经成为各地政府和企业关注的焦点。而作为智慧城市环境卫生管理的基础设施,智慧公厕的建设和发展也备受重视,被誉为智慧城市的新标杆。本文以智慧公厕源头厂家广州中期科技有限公司&a…...

【学习版】Microsoft Office 2021安装破解教程
本文转载自知乎:https://zhuanlan.zhihu.com/p/655653158 由本人二次整理修改 用到的软件为:Office Tool Plus,下载链接:Office Tool Plus 官方网站 - 一键部署 Office (landian.vip) 下载页面:(随机找个站…...

基于java Springboot实现课程评分系统设计和实现
基于java Springboot实现课程评分系统设计和实现 博主介绍:多年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取源…...
git操作基本指令
1.查看用户名 git config user.name 2.查看密码 git config user.password 3.查看邮箱 git config user.email 4.修改用户名 git config --global user.name "xxx(新用户名)" 5.修改密码 git config --global user.password "xxx(新密码)" 6.修改…...

YOLO算法
YOLO介绍 YOLO,全称为You Only Look Once: Unified, Real-Time Object Detection,是一种实时目标检测算法。目标检测是计算机视觉领域的一个重要任务,它不仅需要识别图像中的物体类别,还需要确定它们的位置。与分类任务只关注对…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...

中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中,车辆不再仅仅是传统的交通工具,而是逐步演变为高度智能的移动终端。这一转变的核心支撑,来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒(T-Box)方案:NXP S32K146 与…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

宇树科技,改名了!
提到国内具身智能和机器人领域的代表企业,那宇树科技(Unitree)必须名列其榜。 最近,宇树科技的一项新变动消息在业界引发了不少关注和讨论,即: 宇树向其合作伙伴发布了一封公司名称变更函称,因…...