在日常开发中，大文件上传是个绕不开的坎。本文详细介绍如何使用Vue和Express实现一套完整的大文件上传方案，支持分片上传、断点续传、秒传和手动中断，并深入探讨技术细节和难点解决方案。

💡 **分片上传**: 将大文件切成固定大小的小片段分批上传，避免单次请求超时，解决大文件直接上传易超时和用户体验差的问题。

🔗 **秒传机制**: 通过计算文件哈希值，判断服务器是否已存在完整文件，若存在则直接返回成功，无需重复上传，提高上传效率。

🚀 **断点续传**: 记录已上传的分片，中断后只需上传未完成的分片，无需从头开始，保证上传的可靠性。

⚙️ **并发控制**: 限制同时上传的分片数量，避免请求过多导致浏览器或服务器崩溃，保证上传过程的稳定性。

🛑 **手动中断**: 支持用户随时停止上传，中断后已传分片不丢失，下次可继续上传，提升用户体验。

原创 再学一点就睡Orz 2025-09-03 08:30 重庆

（💰金石瓜分计划倒计时2️⃣天，速戳上图了解详情）

之前分享了大文件上传的前端实现后，但是还有很多细节没有说明，隔了这么久又来考古一下 Orz.

在日常开发中，大文件上传是个绕不开的坎——动辄几百 MB 甚至 GB 级的文件，直接上传不仅容易超时，还会让用户体验大打折扣。最近我用 Vue+Express 实现了一套完整的大文件上传方案，支持分片上传、断点续传、秒传和手动中断，今天就带大家从头到尾盘清楚其中的技术细节。

一、先看效果：我们要实现什么？先上核心功能清单，确保大家明确目标，知道我们要解决哪些实际问题：

「大文件分片上传」：将文件切成固定大小的小片段分批上传，避免单次请求超时

「秒传」：服务器已存在完整文件时，直接返回成功，无需重复上传

「断点续传」：刷新页面或上传中断后，仅上传未完成的分片，无需从头开始

用户选择文件 → 前端分片+算哈希 → 校验文件状态（秒传/断点续传） → 并发上传分片 → 后端合并分片

<template>
  <div class="upload-container">
    <h2>大文件上传演示</h2>
    <input @change="handleUpload" type="file" class="file-input" />
    <!-- 上传中才显示中断按钮 -->
    <button @click="abortUpload" v-if="isUploading" class="abort-btn">
      中断上传
    </button>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 上传状态管理
const isUploading = ref(false); // 是否正在上传
const abortControllers = ref([]); // 存储所有请求的中断控制器

const handleUpload = async (e) => {
  const file = e.target.files[0]; // 获取用户选择的单个文件
  if (!file) return; // 未选文件则退出

  // 后续核心逻辑：分片、算哈希、校验...
  // （下文逐步展开）
};
</script>

<style scoped>
.upload-container { margin: 20px; }
.file-input { margin-right: 10px; }
.abort-btn { padding: 4px 8px; background: #ff4444; color: white; border: none; border-radius: 4px; }
</style>

// 分片大小：1MB（可根据需求调整，如5MB/10MB）
const CHUNK_SIZE = 1024 * 1024; 

/**
 * 生成文件分片数组
 * @param {File} file - 用户选择的原始文件
 * @returns {Blob[]} 分片数组
 */
const createChunks = (file) => {
  let cur = 0; // 当前切割位置
  let chunks = [];
  while (cur < file.size) {
    // 从当前位置切割到「当前位置+分片大小」，最后一片可能不足1MB
    const blob = file.slice(cur, cur + CHUNK_SIZE);
    chunks.push(blob);
    cur += CHUNK_SIZE;
  }
  return chunks;
};

// 示例：3.5MB 的文件会生成 4 个分片（1MB+1MB+1MB+0.5MB）

npm install spark-md5 --save

import sparkMD5 from "spark-md5";

/**
 * 计算文件哈希值（抽样优化）
 * @param {Blob[]} chunks - 分片数组
 * @returns {Promise<string>} 文件哈希值
 */
 const calHash = (chunks) => {
 return new Promise((resolve) => {
 const spark = new sparkMD5.ArrayBuffer(); // 初始化MD5计算器
 const fileReader = new FileReader(); // 用于读取Blob内容
 const targets = []; // 存放抽样的片段（用于计算哈希）

 // 抽样策略：首尾分片全量，中间分片取3个2字节片段（共6字节）
 chunks.forEach((chunk, index) => {
 if (index === 0 || index === chunks.length - 1) {
    // 首尾分片：全量加入抽样
    targets.push(chunk);
  } else {
  // 中间分片：取前2字节、中间2字节、后2字节
    targets.push(chunk.slice(0, 2));
    targets.push(chunk.slice(CHUNK_SIZE / 2, CHUNK_SIZE / 2 + 2));
    targets.push(chunk.slice(CHUNK_SIZE - 2, CHUNK_SIZE));
   }
 });

 // 读取抽样片段并计算哈希
 fileReader.readAsArrayBuffer(new Blob(targets));
 fileReader.onload = (e) => {
 spark.append(e.target.result); // 累加数据
 resolve(spark.end()); // 生成最终哈希值（如："a1b2c3d4e5"）
   };
  });
 };

const fileHash = ref(""); // 文件哈希值
const fileName = ref(""); // 原始文件名（用于取后缀）

/**
 * 向服务器校验文件状态
 * @returns {Promise<Object>} 校验结果（shouldUpload: 是否需要上传, existChunks: 已上传分片列表）
 */
const verify = async () => {
  const res = await fetch("http://localhost:3000/verify", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({
      fileHash: fileHash.value,
      fileName: fileName.value,
    }),
  });
  return res.json();
};

// 在handleUpload中调用校验
const handleUpload = async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  fileName.value = file.name;
  const chunks = createChunks(file);
  fileHash.value = await calHash(chunks); // 计算哈希

  // 发起校验
  const verifyRes = await verify();
  if (!verifyRes.data.shouldUpload) {
    // 服务器已存在完整文件 → 秒传成功
    alert("秒传成功！文件已存在");
    return;
  }

  // 需上传：进入分片上传环节（下文展开）
  await uploadChunks(chunks, verifyRes.data.existChunks);
};

# 2. 安装依赖
npm install express cors multiparty fs-extra path --save

const express = require("express");
const path = require("path");
const fse = require("fs-extra"); // 文件操作工具（比原生fs更易用）
const cors = require("cors");
const bodyParser = require("body-parser");

const app = express();
app.use(cors()); // 解决跨域
app.use(bodyParser.json()); // 解析JSON请求体

// 上传根目录（所有分片和完整文件都存在这里）
const UPLOAD_DIR = path.resolve(__dirname, "uploads");
// 确保上传目录存在
fse.ensureDirSync(UPLOAD_DIR);

/**
 * 提取文件名后缀（如："test.pdf" → ".pdf"）
 * @param {string} fileName - 原始文件名
 * @returns {string} 文件后缀
 */
const extractExt = (fileName) => {
  return fileName.slice(fileName.lastIndexOf("."));
};

// 校验接口：/verify
app.post("/verify", async (req, res) => {
  const { fileHash, fileName } = req.body;
  // 完整文件路径 = 上传目录 + 文件哈希 + 原文件后缀（确保文件名唯一）
  const completeFilePath = path.resolve(UPLOAD_DIR, `${fileHash}${extractExt(fileName)}`);

  // 1. 检查完整文件是否存在 → 秒传逻辑
  if (fse.existsSync(completeFilePath)) {
    return res.json({
      status: true,
      data: { shouldUpload: false } // 无需上传
    });
  }

  // 2. 检查已上传的分片 → 断点续传逻辑
  const chunkDir = path.resolve(UPLOAD_DIR, fileHash); // 分片临时目录（用文件哈希命名）
  const existChunks = fse.existsSync(chunkDir) 
    ? await fse.readdir(chunkDir) // 已上传的分片列表（如：["a1b2-0", "a1b2-1"]）
    : [];

  res.json({
    status: true,
    data: {
      shouldUpload: true, // 需要上传
      existChunks: existChunks // 已上传的分片标识，供前端过滤
    }
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log("服务器运行在 http://localhost:3000");
});

/**
 * 上传分片（核心函数）
 * @param {Blob[]} chunks - 所有分片数组
 * @param {string[]} existChunks - 已上传的分片标识列表
 */
const uploadChunks = async (chunks, existChunks) => {
  isUploading.value = true;
  abortControllers.value = []; // 清空历史中断控制器

  // 1. 生成所有分片的基础信息（文件哈希、分片标识、分片数据）
  const chunkInfoList = chunks.map((chunk, index) => ({
    fileHash: fileHash.value,
    chunkHash: `${fileHash.value}-${index}`, // 分片标识：文件哈希-序号（确保唯一）
    chunk: chunk
  }));

  // 2. 过滤已上传的分片 → 只保留待上传的
  const formDatas = chunkInfoList
    .filter(item => !existChunks.includes(item.chunkHash))
    .map(item => {
      const formData = new FormData();
      formData.append("filehash", item.fileHash);
      formData.append("chunkhash", item.chunkHash);
      formData.append("chunk", item.chunk); // 分片二进制数据
      return formData;
    });

  if (formDatas.length === 0) {
    // 所有分片已上传 → 直接请求合并
    mergeRequest();
    return;
  }

  // 3. 并发上传分片（下文展开）
  await uploadWithConcurrencyControl(formDatas);
};

/**
 * 带并发控制的分片上传
 * @param {FormData[]} formDatas - 待上传的FormData列表
 */
const uploadWithConcurrencyControl = async (formDatas) => {
  const MAX_CONCURRENT = 6; // 最大并发数（可根据需求调整）
  let currentIndex = 0; // 当前待上传的分片索引
  const taskPool = []; // 存储当前正在执行的请求（请求池）

  while (currentIndex < formDatas.length) {
    // 为每个请求创建独立的中断控制器（AbortController）
    const controller = new AbortController();
    const { signal } = controller;
    abortControllers.value.push(controller); // 存入控制器列表

    // 发起分片上传请求
    const task = fetch("http://localhost:3000/upload", {
      method: "POST",
      body: formDatas[currentIndex],
      signal: signal // 绑定中断信号
    })
    .then(res => {
      // 请求完成后，从请求池和控制器列表中移除
      taskPool.splice(taskPool.indexOf(task), 1);
      abortControllers.value = abortControllers.value.filter(c => c !== controller);
      return res;
    })
    .catch(err => {
      // 捕获错误：区分「用户中断」和「其他错误」
      if (err.name !== "AbortError") {
        console.error("分片上传失败：", err);
        // 可在这里加「错误重试」逻辑（如重试3次）
      }
      // 无论何种错误，都清理状态
      taskPool.splice(taskPool.indexOf(task), 1);
      abortControllers.value = abortControllers.value.filter(c => c !== controller);
    });

    taskPool.push(task);

    // 当请求池满了，等待最快完成的一个请求再继续（释放并发名额）
    if (taskPool.length === MAX_CONCURRENT) {
      await Promise.race(taskPool);
    }

    currentIndex++;
  }

  // 等待所有剩余请求完成
  await Promise.all(taskPool);
  // 所有分片上传完成 → 请求合并
  mergeRequest();
};

/**
 * 中断上传（用户触发）
 */
const abortUpload = () => {
  if (!isUploading.value) return;

  // 1. 中断所有正在进行的请求
  abortControllers.value.forEach(controller => {
    controller.abort(); // 调用中断方法，触发请求的AbortError
  });

  // 2. 清理状态
  abortControllers.value = [];
  isUploading.value = false;

  // 3. 通知用户
  alert("上传已中断，下次可继续上传");
};

// 后端：/upload 接口（接收分片）
const multiparty = require("multiparty");

app.post("/upload", (req, res) => {
  const form = new multiparty.Form(); // 解析FormData的工具

  // 解析请求（fields：普通字段，files：文件字段）
  form.parse(req, async (err, fields, files) => {
    if (err) {
      console.error("分片解析失败：", err);
      return res.status(400).json({ status: false, message: "分片上传失败" });
    }

    // 提取字段
    const fileHash = fields["filehash"][0]; // 文件哈希
    const chunkHash = fields["chunkhash"][0]; // 分片标识
    const chunkFile = files["chunk"][0]; // 分片临时文件（multiparty生成的临时文件）

    // 分片临时目录（如：uploads/a1b2c3）
    const chunkDir = path.resolve(UPLOAD_DIR, fileHash);
    // 确保临时目录存在
    await fse.ensureDir(chunkDir);

    // 目标路径：将分片从临时位置移动到临时目录
    const targetChunkPath = path.resolve(chunkDir, chunkHash);
    await fse.move(chunkFile.path, targetChunkPath);

    // 响应前端：分片上传成功
    res.json({ status: true, message: "分片上传成功" });
  });
});

// 前端：请求合并分片的函数
const mergeRequest = async () => {
  await fetch("http://localhost:3000/merge", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({
      fileHash: fileHash.value,
      fileName: fileName.value,
      size: CHUNK_SIZE // 分片大小（用于计算写入位置）
    }),
  });

  // 合并完成后的清理
  isUploading.value = false;
  alert("文件上传完成！");
};

// 后端：/merge 接口（合并分片）
app.post("/merge", async (req, res) => {
  const { fileHash, fileName, size: CHUNK_SIZE } = req.body;
  // 完整文件路径（上传目录 + 文件哈希 + 后缀）
  const completeFilePath = path.resolve(UPLOAD_DIR, `${fileHash}${extractExt(fileName)}`);
  // 分片临时目录
  const chunkDir = path.resolve(UPLOAD_DIR, fileHash);

  // 检查分片目录是否存在（防止恶意请求）
  if (!fse.existsSync(chunkDir)) {
    return res.status(400).json({ status: false, message: "分片目录不存在" });
  }

  // 1. 读取所有分片并按序号排序
  const chunkPaths = await fse.readdir(chunkDir);
  chunkPaths.sort((a, b) => {
    // 从分片标识中提取序号（如："a1b2-0" → 0）
    return parseInt(a.split("-")[1]) - parseInt(b.split("-")[1]);
  });

  // 2. 用流拼接分片（边读边写，低内存占用）
  const mergePromises = chunkPaths.map((chunkName, index) => {
    return new Promise((resolve) => {
      const chunkPath = path.resolve(chunkDir, chunkName);
      const readStream = fse.createReadStream(chunkPath); // 分片读流
      const writeStream = fse.createWriteStream(completeFilePath, {
        start: index * CHUNK_SIZE, // 写入起始位置（精确到字节）
        end: (index + 1) * CHUNK_SIZE // 写入结束位置
      });

      // 分片读取完成后：删除分片文件 +  resolve
      readStream.on("end", async () => {
        await fse.unlink(chunkPath); // 删除单个分片
        resolve();
      });

      // 管道流：将分片内容写入完整文件
      readStream.pipe(writeStream);
    });
  });

  // 3. 等待所有分片合并完成
  await Promise.all(mergePromises);
  // 4. 删除分片临时目录（合并完成后清理）
  await fse.remove(chunkDir);

  // 响应前端：合并成功
  res.json({ status: true, message: "文件合并成功" });
});

核心难点

解决方案

代码关键位置

大文件哈希计算慢

抽样读取片段（首尾全量 + 中间分片抽样）

 函数

并发请求过多导致崩溃

用「请求池 + Promise.race」限制并发数

 函数

用户需要手动中断上传

用 AbortController 中断请求 + 清理状态

 函数

分片合并顺序错乱

按分片序号排序，用流按固定位置写入

后端 /merge 接口的排序逻辑

刷新页面后需从头上传

校验时返回已上传分片，前端过滤后再上传

前端 filter 逻辑 + 后端 /verify 接口

大文件合并内存溢出

用流（Stream）边读边写，避免全量加载

后端 /merge 接口的流操作

AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding

点击"阅读原文"了解详情~

阅读原文

跳转微信打开

Fish AI Reader

Fish AI Reader

AI辅助创作，多种专业模板，深度分析，高质量内容生成。从观点提取到深度思考，FishAI为您提供全方位的创作支持。新版本引入自定义参数，让您的创作更加个性化和精准。

FishAI

鱼阅，AI 时代的下一个智能信息助手，助你摆脱信息焦虑

联系邮箱 441953276@qq.com