大文件的断点续传如何实现

断点续传

        断点续传是一种数据恢复技术,主要用于在读取或发送数据时,因为网络问题、磁盘问题等原因导致数据传输中断。断点续传技术允许你在已经传输的数据基础上继续传输,从而节省数据传输时间。

        断点续传通常用于文件传输过程中,当传输中断时,可以基于已传输的数据继续传输,从而提高文件传输的效率。例如,在下载文件时,如果下载中断,你可以从已经下载的文件中继续下载。

        断点续传通常由两部分组成:服务器端(或文件服务器)记录已发送的数据块信息(即断点信息)以及客户端(或文件客户端)根据服务器端的断点信息继续发送数据。

核心思路代码

前端:
// 选择文件并上传
function uploadFile(file) {const chunkSize = 1024 * 1024 // 每个分块的大小,这里设定为1MBconst totalChunks = Math.ceil(file.size / chunkSize) // 总分块数let currentChunk = 0 // 当前上传的分块索引// 逐个上传分块function uploadChunk() {const start = currentChunk * chunkSizeconst end = Math.min(start + chunkSize, file.size)const chunk = file.slice(start, end)const formData = new FormData()formData.append('file', chunk)formData.append('totalChunks', totalChunks)formData.append('currentChunk', currentChunk)// 发送分块数据到后端fetch('/upload', {method: 'POST',body: formData}).then(response => {if (response.ok) {// 分块上传成功,继续上传下一个分块currentChunk++if (currentChunk < totalChunks) {uploadChunk()} else {console.log('文件上传完成')}} else {console.error('分块上传失败')}}).catch(error => {console.error('网络错误', error)})}// 开始上传uploadChunk()
}// 选择文件并触发上传
const fileInput = document.getElementById('fileInput')
fileInput.addEventListener('change', () => {const file = fileInput.files[0]if (file) {uploadFile(file)}
})
后端:
const express = require('express')
const multer = require('multer')const app = express()
const upload = multer({ dest: 'uploads/' })app.post('/upload', upload.single('file'), (req, res) => {const { file, body: { totalChunks, currentChunk } } = req// 根据totalChunks和currentChunk处理分块上传的逻辑// 这里可以将分块数据保存到磁盘或云存储中,并记录已上传的分块信息if (currentChunk == totalChunks - 1) {// 最后一个分块上传完成,表示整个文件上传完成console.log('文件上传完成')}res.sendStatus(200)
})app.listen(3000, () => {console.log('服务器已启动')
})

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

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

相关文章

C语言基本概念——正确理解C,不要被错误的题目误导

在进行C语言训练或做题时&#xff0c;我们可能会遇到一些看似简单但实则错误的题目。这些题目可能会误导我们对C语言基本概念的认识。因此&#xff0c;正确理解C语言并辨别题目中的错误至关重要。下面&#xff0c;举例说明题目错在哪。 1. 写出下列程序的运行结果。 #include…

vue3自定义按钮点击变颜色(切换)

实现效果图&#xff1a; 默认选中第一个按钮&#xff0c;未选中按钮为粉色&#xff0c;点击时颜色变为红色 利用动态类名&#xff0c;当定义isChange数值和下标index相同时&#xff0c;赋予act类名&#xff0c;实现变色效果 <template><view class"page"&g…

Find -name详解

Linux find命令的基本语法如下&#xff1a; find [path] [expression] path&#xff1a;要查找的目录路径。 expression&#xff1a;查找表达式&#xff0c;指定要查找的文件类型、名称、大小等条件 例子&#xff1a;find /etc -name passwd 这个表达式&#xff0c;指定条件为…

进阶Docker4:网桥模式、主机模式与自定义网络

目录 网络相关 子网掩码 网关 规则 docke网络配置 bridge模式 host模式 创建自定义网络(自定义IP) 网络相关 IP 子网掩码 网关 DNS 端口号 子网掩码 互联网是由许多小型网络构成的&#xff0c;每个网络上都有许多主机&#xff0c;这样便构成了一个有层次的结构。 IP 地…

【踩坑日志】SpringBoot读取nacos配置信息并提取信息中的IP地址(配置属性解析异常+排错记录)

缘起 &#xff1a;项目需读取nacos中动态的TDengine数据库连接信息并提取IP&#xff0c;一个并不复杂的操作&#xff0c;但作为一个nacos知识浅薄的菜鸡&#xff0c;我愣是捯饬了几个小时……惭愧惭愧…… 异常代码 Data Component public class TaosLink { // Value("…

ICC2:channel power plan/power switch的添加方法

更多学习内容请关注「拾陆楼」知识星球 拾陆楼知识星球入口 往期文章链接: low power与pg strategy (lib cell pin connect) low power与pg strategy(pg mesh) low power与pg

深度解析Pytest插件pytest-html

在软件开发中&#xff0c;测试报告是开发者获取测试结果和问题定位的关键工具之一。然而&#xff0c;标准的控制台输出有时难以满足我们对测试报告的需求。幸运的是&#xff0c;Pytest插件 pytest-html 提供了一种简单而强大的方式&#xff0c;可以生成漂亮、可视化的HTML格式测…

Opencv小项目——手势数字刷TIKTOK

​ 写在前面&#xff1a; 很久没更新了&#xff0c;之前的实习的记录也算是烂尾了&#xff0c;但是好在自己的实习记录还是有的&#xff0c;最近也忙碌了很多&#xff0c;终于放假了&#xff0c;今天下午正好没事&#xff0c;闲来无事就随便做个小玩意吧。 思来想去&#xff…

VLAN区域间路由详解

LAN局域网 WAN 广域网 WLAN无线局域网 VLAN:虚拟局域网 交换机和路由器&#xff0c;协同工作后&#xff0c;将原来的一个广播域&#xff0c;切分为多个&#xff0c;节省硬件成本&#xff1b; 配置思路&#xff1a; 交换机上创建vlan交换机上的各个接口划分到对应的vlan中 T…

canvas绘制不同样式的五角星(图文示例)

查看专栏目录 canvas实例应用100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

web蓝桥杯真题--9、水果拼盘

介绍 目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方案&#xff0c;本题可以使用 Flex 属性快速完成布局。 准备 开始答题前&#xff0c;需要先打开本题的项目代码文件夹&#xff0c;目录结构如下&#xff1a; ├── css │ └── style.css ├── im…

vue生命周期,父子组件生命周期

生命周期 什么是生命周期? 从Vue实例创建、运行、到销毁期间&#xff0c;总是伴随着各种各样的事件&#xff0c;这些事件&#xff0c;统称为生命周期&#xff01; beforeCreate: 初始化之前&#xff0c;data和methods的数据还没有初始化 ⻚面重定向 created&#xff1a;初始化…