使用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();
});

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

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

相关文章

[Docker 教学] 常用的Docker 命令

Docker是一种流行的容器化技术。使用Docker可以将数据科学应用程序连同代码和所需的依赖关系打包成一个名为镜像的便携式工件。因此&#xff0c;Docker可以简化开发环境的复制&#xff0c;并使本地开发变得轻松。 以下是一些必备的Docker命令列表&#xff0c;这些命令将在你下一…

UI学习-学习内容

教程网址1&#xff1a;UI 新手如何从设计规范中提升自己 推荐一下高质量的设计规范 满屏干货 语雀 B站地址1&#xff1a;新像素 UI 新手如何从设计规范中提升自己 推荐一下高质量的设计规范 满屏干货 UI设计培训_哔哩哔哩_bilibili 教程地址2&#xff1a;UI 新手成长经验分享…

golang学习6,glang的web的restful接口传参

1.get传参 //get请求 返回json 接口传参r.GET("/getJson/:id", controller.GetUserInfo) 1.2.接收处理 package controllerimport "github.com/gin-gonic/gin"func GetUserInfo(c *gin.Context) {_ c.Param("id")ReturnSucess(c, 200, &quo…

基于雷达影像的洪水监测技术方法详解

洪水发生时候大多数是阴雨天气&#xff0c;光学影像基本上拍不到有效影像。雷达影像这时候就能发挥其不受天气影像的优点。现在星载的雷达卫星非常多&#xff0c;如高分三号、陆探一号、海丝一号&#xff08;巢湖一号&#xff09;、哨兵1号等。本文以哨兵1号L1地距(GRD)产品来介…

2018-02-14 新闻内容爬虫【上学时做论文自己爬新闻数据,原谅我自己懒发的图片】

2018-02-14新闻内容爬虫【上学时做论文自己爬新闻数据&#xff0c;原谅我自己懒发的图片】资源-CSDN文库https://download.csdn.net/download/liuzhuchen/88878591爬虫过的站点&#xff1a; 1QQ新闻 1&#xff0c;准备爬取滚动新闻页面 2 通过F12 开发工具查找发现&#xff…

高性能 Kafka 及常见面试题

Kafka 是一种分布式的&#xff0c;基于发布/订阅的消息系统&#xff0c;原本开发自 LinkedIn&#xff0c;用作 LinkedIn 的事件流&#xff08;Event Stream&#xff09;和运营数据处理管道&#xff08;Pipeline&#xff09;的基础。 基础原理详解可见 Kafka 基本架构及原理 基础…

嵌入式驱动学习第一周——git的使用

前言 本文主要介绍git的使用&#xff0c;包括介绍git&#xff0c;gitee&#xff0c;以及使用gitee创建仓库并托管代码 嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程&#xff0c;未来预计四个月将高强度更新本专栏&#xff0c;喜欢的可以关注本博主并订阅本专栏&#xf…

【C进阶】顺序表详解

文章目录 &#x1f4dd;线性表的概念&#x1f320; 顺序表&#x1f309;顺序表的概念 &#x1f320;声明--接口&#x1f309;启动&#x1f320;初始化&#x1f309;扩容&#x1f320;尾插&#x1f309; 打印&#x1f320;销毁&#x1f309; 尾删&#x1f320;头插&#x1f309;…

探索便捷办公新选择:ONLYOFFICE 桌面编辑器

目录 引言 1. ONLYOFFICE 桌面编辑器简介 2. 功能特点 2.1 多格式支持 2.2 实时协作编辑 2.3 兼容性与格式保持 2.4 丰富的编辑功能 3. 使用方法 3.1 下载安装 3.2 打开文档 3.3 编辑文档 3.4 保存和共享 4. 注意事项 4.1 版本更新 4.2 网络连接 4.3 安全性 5.…

FL Studio Producer Edition2024中文进阶版Win/Mac

FL Studio Producer Edition&#xff0c;特别是其【中文进阶版 Win/Mac】&#xff0c;是数字音乐制作领域中的一款知名软件。它为广大音乐制作人、声音工程师以及音乐爱好者提供了一个从音乐构思到最终作品发布的完整解决方案。这个版本特别为中文用户优化&#xff0c;并兼容W…

SpringBooot之RestTemplate接口返回多层泛型导致java.util.LinkedHashMap cannot be cast to异常

统一泛型返回对象 Data public class Res<T> implements Serializable {private static final long serialVersionUID 6558796578827818466L;private Integer code; //状态码private String msg; //返回消息private T data; //数据 }data里包裹的泛型对象假设是DZPJ D…

【Android移动开发】Windows10平台安装Android Studio与人工智能算法模型部署案例

目录 一、Android Studio下载地址二、开发环境JDK三、开始安装Android Studio四、案例展示与搭建五、人工智能算法模型移动端部署案例参考 一、Android Studio下载地址 https://developer.android.google.cn/studio/install.html 电脑配置要求&#xff1a; 下载保存在指定文…

Centos7下安装ruby2.7.8环境、WPScan的安装及使用介绍

前一段自己搭建了一个基于Wordpress搭建的博客&#xff0c;为了测试一下博客网站是否存在漏洞&#xff0c;网上搜索了一下主要采用WPScan工具。它是一个针对 WordPress 核心、插件和主题的漏洞扫描器&#xff0c;它可以帮助网站管理员检查其 WordPress 站点是否存在已知的安全问…

【Flutter】Flutter学习-GetX 导航操作

1.跳转 在原生中咱们一般运用的是push进行跳转的&#xff0c;这儿是没有界说途径直接经过上下文进行跳转 Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) > DiscoverChildPage(title: widget.title,)));咱们运用Get.to进行跳转 Get.to( D…

Java+SpringBoot+Vue+MySQL构建银行客户管理新平台

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

Linux按键输入实验-创建按键的设备节点

一. 简介 Linux内核针对 GPIO驱动开发,提供了 pinctrl子系统与gpio子系统,方便了 GPIO驱动程序的开发。 本文开始学习如何利用 Linux内核的 pinctrl子系统,与 gpio子系统提供的 API函数,开发按键驱动。 这里主要学习在设备树文件中创建按键的设备节点。 二. Linux按键…

C# 学习第三弹——表达式

表达式操作数运算符 &#xff08;一&#xff09;算数运算符 错误例子&#xff1a;这不是python&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 正确结果&a…

css transform 会影响position 定位

比如通过以下代码.实现导航条上的每个li栏目,以不同的时间间隔,从上向下移动进来并显示 .my-navbar ul li {position: relative;opacity: 0;transform: translateY(-30px);transition: transform .6s cubic-bezier(.165,.84,.44,1),opacity .6s cubic-bezier(.165,.84,.44,1);…

【力扣 - 有效的括号】

题目描述 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应的相同…

从 SOCKS5、代理IP 到 HTTP 的趣味解读

在数字化时代&#xff0c;网络安全已成为人们日常生活和工作中不可或缺的重要议题。然而&#xff0c;随着网络技术的发展&#xff0c;我们也发现了一些趣味横生的网络代理技术&#xff0c;比如 SOCKS5、代理IP 和 HTTP 代理。本文将以轻松愉快的方式&#xff0c;探讨这些技术在…