Vue 3 中多个文件合并请求是各自独立触发的：每个文件完成分片上传后，单独调用专属合并接口（如 /api/merge?hash=xxx&filename=xxx），参数含唯一 hash、原始 filename 和 totalChunks，通过状态锁、响应校验与失败兜底确保安全。

Vue 3 中处理多个文件的合并请求，核心不是“一次发多个合并请求”，而是每个文件独立完成分片上传后，各自触发一次专属的合并请求。所谓“多个文件”，指的是用户一次选中了若干个大文件（比如 3 个视频），它们并行上传、互不干扰，每个文件走完自己的切片上传流程后，再单独向后端发起合并指令。

每个文件对应一个独立的合并流程

前端不会把多个文件的分片混在一起传，也不会打包成一个合并请求。真实逻辑是：

• 用户选择多个 File 对象，逐个进入上传队列
• 对每个文件单独执行：切片 → 计算哈希 → 校验秒传 → 上传未完成的分片
• 当某个文件的所有分片 全部确认成功返回 后，立即调用该文件专属的合并接口（如 /api/merge?hash=xxx&filename=xxx）
• 多个文件的合并请求是并发或串行发出的，但彼此参数隔离、响应独立

合并请求的关键参数必须唯一绑定文件

后端靠这几个字段准确定位要拼哪一组分片，前端必须确保不混淆：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 文件唯一标识（hash）：通常为 MD5 或抽样计算的 SparkMD5 值，由前端在上传前完成
• 原始文件名（filename）：用于生成最终保存路径和校验，注意 URL 编码防止特殊字符出错
• 总分片数（totalChunks）：与切片逻辑一致，让后端知道该等多少个分片
• 可选：用户 ID 或会话标识：用于权限隔离或清理过期分片

避免合并请求被误触发或重复发送

常见问题不是“怎么发”，而是“不该发的时候发了”。建议加三层防护：

• 状态锁：每个文件维护 isMerging: boolean，发起合并前设为 true，响应后重置；重复点击无效
• 响应校验：后端返回合并结果时，必须包含 status: "success" 和 fileUrl，前端只在此条件下更新 UI
• 失败兜底：若合并请求超时或报错（如 404 表示分片缺失），提示用户“合并失败，请重试”，不自动重发，由用户主动触发重试按钮

实际调用示例（使用 axios）

合并请求本身就是一个标准 POST，无需 multipart：

```ts
const mergeFile = async (hash: string, filename: string, totalChunks: number) => {
  try {
    const res = await axios.post('/api/merge', { hash, filename, totalChunks });
    if (res.data.status === 'success') {
      console.log('合并完成，地址：', res.data.fileUrl);
    }
  } catch (err) {
    console.error('合并失败', err);
  }
};
```

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！