如何用Node.js实现一个支持断点续传的文件上传?

实现断点续传需前后端协同:前端切片并记录上传状态,后端存储分片并支持查询与合并;通过文件哈希标识唯一性,上传前检查已传分片以跳过重传,最后按序合并并清理临时文件。

如何用Node.js实现一个支持断点续传的文件上传?

实现支持断点续传的文件上传,核心在于将大文件分片上传,并记录已上传的片段信息,以便在网络中断或上传失败后能从中断处继续上传。node.js结合前端可以很好地实现这一功能。以下是完整的实现思路和步骤。

1. 前端:文件切片与分片上传

用户选择文件后,前端将其切分为多个小块(chunk),并逐个上传。每个分片携带唯一标识(如文件名、文件哈希、分片序号等)。

示例代码(前端):

计算文件哈希(可选,用于唯一标识文件): 可使用 spark-md5FileReader 读取文件部分内容生成哈希。

切片上传逻辑:

  • 读取文件,使用 File.slice() 方法切割成固定大小的块(如 1MB)
  • 每块通过 POST 请求发送到服务器,附带参数:文件名、分片索引、总分片数、文件哈希等
  • 上传前可先请求服务器查询已上传的分片,跳过已上传的部分
  • 所有分片上传完成后,发送合并请求

2. 后端(Node.js):接收分片并存储

使用 express 搭建服务,处理分片上传、状态查询和文件合并。

如何用Node.js实现一个支持断点续传的文件上传?

如知AI笔记

如知笔记——支持markdown的在线笔记,支持ai智能写作、AI搜索,支持DeepseekR1满血大模型

如何用Node.js实现一个支持断点续传的文件上传?27

查看详情 如何用Node.js实现一个支持断点续传的文件上传?

所需依赖:

expressmulter(处理 multipart/form-data)、fspath

关键接口设计:

  • /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 负责接收、存储和合并,前端负责切片和流程控制。不复杂但容易忽略细节,比如文件哈希一致性、并发写入等问题。

    当前页面评论已关闭。

    text=ZqhQzanResources