Vue大文件上传优化：断点续传与分片技术实战

1. 大文件上传的痛点与断点续传的价值

前端开发中处理大文件上传是个老生常谈却又常做常新的技术点。去年我在重构公司资源管理系统时，就遇到了用户频繁反馈的"上传到90%突然失败要重头再来"的问题。一个500MB的设计稿文件，上传耗时近20分钟，网络波动导致前功尽弃的挫败感，直接影响了用户的工作效率。

断点续传技术正是解决这个痛点的银弹。其核心原理是将大文件切割为多个小块（chunk），通过唯一文件标识实现分片上传和校验。当上传中断时，只需重新上传未完成的片段，而非整个文件。这种机制带来三个显著优势：

1. 容错能力提升：单次网络中断仅影响当前分片
2. 上传效率优化：支持并行上传多个分片
3. 带宽利用率提高：失败重传时无需消耗额外流量

在Vue技术栈中实现这一功能，需要前后端协同设计。下面就以我实际落地的方案为例，详解技术实现与性能优化策略。

2. 前端核心实现方案

2.1 文件分片处理策略

文件分片是断点续传的基础操作，关键参数是分片大小（chunkSize）。经过多次实测，我总结出分片大小的黄金法则：

javascript复制// 动态分片策略
function calculateChunkSize(fileSize) {
  const MB = 1024 * 1024
  if (fileSize > 1024 * MB) return 5 * MB  // 超大文件用5MB分片
  if (fileSize > 100 * MB) return 2 * MB   // 大文件用2MB分片
  return 1 * MB                            // 常规文件用1MB分片
}

这种动态分片策略的优点是：

• 小文件避免过多分片导致请求冗余
• 大文件适当增大分片降低请求数量
• 超大文件控制分片大小避免单次失败代价过高

踩坑提示：固定分片大小（如一律2MB）在极端情况下会导致性能劣化。曾遇到用户上传3GB视频时，固定2MB分片产生1500+请求，反而增加了失败概率。

2.2 文件指纹生成方案

可靠的唯一标识是断点续传的核心。传统方案使用"文件名+大小"作为标识，但存在重名文件覆盖风险。我们采用更安全的组合方案：

javascript复制async function generateFileHash(file) {
  const chunkSize = 2 * 1024 * 1024 // 抽样2MB计算hash
  const chunks = Math.ceil(file.size / chunkSize)
  const spark = new SparkMD5.ArrayBuffer()
  
  // 抽样首尾各2个分片+中间随机3个分片
  const samples = [0, 1, chunks - 2, chunks - 1]
  for (let i = 0; i < 3; i++) {
    samples.push(Math.floor(Math.random() * chunks))
  }

  for (const index of samples) {
    con