Node.js断点续传上传实现方法
时间:2025-10-08 10:51:32 277浏览 收藏
IT行业相对于一般传统行业,发展更新速度更快,一旦停止了学习,很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习,精进自己的技术,尤其是初学者。今天golang学习网给大家整理了《Node.js实现断点续传文件上传方法》,聊聊,我们一起来看看吧!
实现断点续传需前后端协同:前端切片并记录上传状态,后端存储分片并支持查询与合并;通过文件哈希标识唯一性,上传前检查已传分片以跳过重传,最后按序合并并清理临时文件。

实现支持断点续传的文件上传,核心在于将大文件分片上传,并记录已上传的片段信息,以便在网络中断或上传失败后能从中断处继续上传。Node.js结合前端可以很好地实现这一功能。以下是完整的实现思路和步骤。
1. 前端:文件切片与分片上传
用户选择文件后,前端将其切分为多个小块(chunk),并逐个上传。每个分片携带唯一标识(如文件名、文件哈希、分片序号等)。
示例代码(前端):计算文件哈希(可选,用于唯一标识文件): 可使用 spark-md5 或 FileReader 读取文件部分内容生成哈希。
切片上传逻辑:
- 读取文件,使用 File.slice() 方法切割成固定大小的块(如 1MB)
- 每块通过 POST 请求发送到服务器,附带参数:文件名、分片索引、总分片数、文件哈希等
- 上传前可先请求服务器查询已上传的分片,跳过已上传的部分
- 所有分片上传完成后,发送合并请求
2. 后端(Node.js):接收分片并存储
使用 Express 搭建服务,处理分片上传、状态查询和文件合并。
所需依赖:express、multer(处理 multipart/form-data)、fs、path
关键接口设计:- /upload/check:查询某文件已上传的分片列表
- /upload/chunk:接收单个分片,保存到临时目录
- /upload/merge:所有分片上传完成后,合并文件
示例代码(Node.js 后端):
const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');
const app = express();
const uploadDir = './uploads';
const chunkDir = './chunks';
!fs.existsSync(uploadDir) && fs.mkdirSync(uploadDir);
!fs.existsSync(chunkDir) && fs.mkdirSync(chunkDir);
// 配置 multer 存储分片
const storage = multer.diskStorage({
destination: (req, file, cb) => {
const dir = path.join(chunkDir, req.body.fileHash);
!fs.existsSync(dir) && fs.mkdirSync(dir, { recursive: true });
cb(null, dir);
},
filename: (req, file, cb) => {
// 使用分片索引命名
cb(null, `part-${req.body.chunkIndex}`);
}
});
const upload = multer({ storage });
// 查询已上传的分片
app.post('/upload/check', (req, res) => {
const { fileHash } = req.body;
const chunkPath = path.join(chunkDir, fileHash);
if (!fs.existsSync(chunkPath)) return res.json({ uploaded: [] });
fs.readdir(chunkPath, (err, files) => {
if (err) return res.status(500).send();
const uploaded = files.map(f => parseInt(f.split('-')[1]));
res.json({ uploaded });
});
});
// 接收分片
app.post('/upload/chunk', upload.single('chunk'), (req, res) => {
res.json({ success: true });
});
// 合并文件
app.post('/upload/merge', (req, res) => {
const { fileHash, fileName, totalChunks } = req.body;
const chunkPath = path.join(chunkDir, fileHash);
const filePath = path.join(uploadDir, fileName);
const writeStream = fs.createWriteStream(filePath);
function appendChunk(i) {
if (i >= totalChunks) {
writeStream.end();
// 清理分片
fs.rm(chunkPath, { recursive: true }, () => {});
return res.json({ url: `/files/${fileName}` });
}
const partPath = path.join(chunkPath, `part-${i}`);
const readStream = fs.createReadStream(partPath);
readStream.pipe(writeStream, { end: false });
readStream.on('end', () => appendChunk(i + 1));
}
appendChunk(0);
});
3. 断点续传的关键逻辑
要真正实现“续传”,需满足以下几点:
- 唯一标识文件:使用文件名 + 大小 + 哈希值确保文件唯一性
- 上传前检查:上传开始前调用 /upload/check 获取已上传的分片,跳过重传
- 按序存储分片:每个分片以索引命名,便于后续合并
- 合并后清理临时文件:防止磁盘占用
4. 前端优化建议
- 使用 Web Workers 计算大文件哈希,避免阻塞 UI
- 添加上传进度条:基于已上传分片数量 / 总数
- 支持暂停/恢复:暂停时停止发送,恢复时重新 check 并继续
- 错误重试机制:对失败的分片进行有限次重试
文中关于的知识介绍,希望对你的学习有所帮助!若是受益匪浅,那就动动鼠标收藏这篇《Node.js断点续传上传实现方法》文章吧,也可关注golang学习网公众号了解相关技术文章。
相关阅读
更多>
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
最新阅读
更多>
-
427 收藏
-
171 收藏
-
130 收藏
-
432 收藏
-
298 收藏
-
291 收藏
-
458 收藏
-
149 收藏
-
256 收藏
-
147 收藏
-
181 收藏
-
313 收藏
课程推荐
更多>
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习