Vue大文件上传核心是将上传变为可追踪、可恢复、可验证的过程：前端用File.slice()切片（2–5MB）、spark-md5增量算哈希、Promise.allSettled控制并发；上传前查服务端状态实现断点续传，哈希命中即秒传；全程精准反馈分片级与全局进度，并支持暂停、恢复与单片重试。

Vue 实现大文件分片上传与断点续传，核心不是堆功能，而是把“上传”从一次动作变成一个可追踪、可恢复、可验证的过程。关键在于前端主动切片、计算指纹、管理状态，再配合后端的分片接收、状态记录和合并能力。

前端怎么切片并控制上传节奏

用 File.slice() 把文件切成固定大小的 Blob（比如 2MB 或 5MB），不读全文件，不占内存。每片带索引、起始偏移、哈希（可选），组成结构化 chunk 列表：

• 切片大小要权衡：太小（如 100KB）请求太多，HTTP 开销大；太大（如 20MB）单次失败成本高，也容易触发网关超时
• 建议默认设为 2–5MB，支持用户或配置动态调整
• 用 Promise.allSettled() 控制并发数（如最多同时传 3 片），避免压垮浏览器或服务端
• 每片上传成功后，本地缓存该片索引（可用 localStorage 或 in-memory Map），用于后续续传判断

怎么做到断点续传不重来

断点续传的前提是服务端能告诉你“哪些片已存”。前端在开始上传前，先发一次 GET 请求查状态：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 请求 /upload/status/{fileHash}，传入整个文件的 MD5/SHA1（用 spark-md5 增量计算，不加载全文件）
• 服务端返回已上传的分片索引数组，比如 [0, 1, 2, 4, 5]，说明第 3 片丢了
• 前端只对缺失的索引发起上传，跳过已成功的部分，真正实现“从中断处继续”
• 注意：本地缓存的已传列表不能直接信任，每次上传前必须和服务端比对，防止本地数据丢失或脏读

怎么让相同文件秒传不走网络

秒传本质是服务端查重。流程很轻量：

立即学习“前端免费学习笔记（深入）”；

• 用户选中文件后，立即用 spark-md5 计算全文件哈希（增量式，毫秒级）
• 立刻请求 /upload/status/{hash}，如果服务端返回 {"uploaded": true, "url": "/files/xxx.mp4"}，就跳过所有上传步骤，直接走完成逻辑
• 服务端判断依据是：该哈希对应文件是否已完整合并且可访问。只要存在，就不收任何分片
• 这个环节还能顺便校验文件完整性——秒传成功的文件，100%和服务端已存的一致

进度反馈和用户体验怎么稳住

大文件上传最怕“黑盒感”。真实进度必须反映两个维度：

• 分片级进度：每个 chunk 有自己的上传百分比（基于 XMLHttpRequest.upload.onprogress 或 axios 的 onUploadProgress）
• 全局进度：整体 = 已成功分片数 × 单片大小 + 当前正在传的那片的实时字节数 ÷ 总文件大小
• 提供暂停/恢复按钮（暂停即中断当前上传中的分片，恢复时重新查状态再续）
• 上传失败时明确提示哪一片出错、错误类型（网络？401？500？），并支持单片重试，而不是整文件重来