实现断点续传需前后端协同：前端切片并记录上传状态，后端存储分片并支持查询与合并；通过文件哈希标识唯一性，上传前检查已传分片以跳过重传，最后按序合并并清理临时文件。
实现支持断点续传的文件上传，核心在于将大文件分片上传，并记录已上传的片段信息，以便在网络中断或上传失败后能从中断处继续上传。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 负责接收、存储和合并，前端负责切片和流程控制。不复杂但容易忽略细节，比如文件哈希一致性、并发写入等问题。
以上就是如何用Node.js实现一个支持断点续传的文件上传？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528455.html
微信扫一扫 
支付宝扫一扫 
