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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-10

浏览次数：次

返回列表

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

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

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

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

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

示例代码（前端）：

计算文件哈希（可选，用于唯一标识文件）： 可使用 spark-md5 或 FileReader 读取文件部分内容生成哈希。

切片上传逻辑：

读取文件，使用 File.slice() 方法切割成固定大小的块（如 1MB）

每块通过 POST 请求发送到服务器，附带参数：文件名、分片索引、总分片数、文件哈希等
上传前可先请求服务器查询已上传的分片，跳过已上传的部分
所有分片上传完成后，发送合并请求

2. 后端（Node.js）：接收分片并存储

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

商易多用户商城

功能介绍：1. 商品出售包含拍卖模式，一口价模式。2. 全套系统采用淘宝网风格，成熟，简洁大方3. 每个商品支持多张图片上传，可自由设定，满足广大网民的迫切要求4. 商品信息支持 ubb,图文并茂5. 注册用户可参与竞拍，或者拍卖自己的商品6. 拥有会员注册，交易提醒，成交商品确认等邮件发送功能7. 拥有交易双方信用评价的功能，使得交易安全可*，可信度高8. 拥有安全稳定的用户虚拟币平台，可实现商

0 查看详情商易多用户商城

所需依赖：

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实现一个支持断点续传的文件上传？的详细内容，更多请关注其它相关文章！

# 前端 # 跳过 # 文件上传 # 多用户 # 断点续传 # 上传 # 分片 # 前端优化 # 后端 # app # node # json # node.js # js # stream # 医疗网站建设昆明 # 如何建设房地产网站 # 南京推广网站推广费 # 雨湖区商城网站建设招标 # 农业门户网站建设方案 # 关键词越刷越没有排名 # 商业网站建设接单 # seo的用法 # 智能门店营销推广策略 # seo关键词挖掘流程 # 服务端 # 如何使用 # 如何用

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：J*aScript 的包管理工具 npm 或 Yarn 是如何解析依赖树的？

下一篇：css输入框focus颜色如何调整

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

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

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

2. 后端（Node.js）：接收分片并存储

3. 断点续传的关键逻辑

4. 前端优化建议