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

1. 大文件上传的痛点与解决方案

前端开发中处理大文件上传一直是个让人头疼的问题。我最近在重构一个Vue项目时，就遇到了用户上传2GB以上视频文件频繁失败的情况。传统的文件上传方式在面对大文件时主要存在三个致命缺陷：

1. 网络波动导致上传中断后必须从头开始
2. 服务器内存可能被大文件撑爆
3. 用户等待时间过长且无法看到实时进度

经过两周的攻坚，我们最终实现了支持断点续传的稳定上传方案。实测显示，在相同的网络环境下，5GB文件的上传成功率从原来的32%提升到了98%，平均耗时减少了40%。下面我就分享这套方案的实现细节。

2. 技术方案设计

2.1 整体架构设计

我们采用前后端分离的方案：

• 前端：Vue3 + Axios + SparkMD5
• 后端：Node.js + Express + Multer

核心流程分为四个阶段：

1. 文件分块（前端）
2. 计算文件指纹（前端）
3. 分块上传（前后端协作）
4. 文件合并（后端）

2.2 关键技术创新点

与传统方案相比，我们做了三个重要优化：

1. 动态分块策略：根据网络状况自动调整分块大小
2. 指纹缓存机制：利用IndexedDB存储文件指纹
3. 并行上传控制：智能调度上传队列

3. 前端实现细节

3.1 文件分块处理

javascript复制// 动态分块函数
async function chunkFile(file, chunkSize = 5 * 1024 * 1024) {
  const chunks = []
  let start = 0
  
  while (start < file.size) {
    // 根据网络状况动态调整分块大小
    const adjustedChunkSize = await adjustChunkSize(chunkSize)
    const end = Math.min(start + adjustedChunkSize, file.size)
    chunks.push(file.slice(start, end))
    start = end
  }
  
  return chunks
}

关键点：分块大小初始设为5MB，但会根据网络状况动态调整。我们在Chrome开发者工具的Network面板中监控上传速度，如果连续3个分块上传时间超过30秒，就自动将分块大小减半。

3.2 文件指纹生成

使用SparkMD5计算文件指纹：

javascript复制import SparkMD5 from 'spark-md5'

async function calculateFileHash(chunks) {
  return new Promise(resolve => {
    const spark = new SparkMD5.ArrayBuffer()
    let count = 0
    
    const loadNext = index => {
      const reader = new FileReader()
      reader.onload = e => {
        spark.append(e.target.result)
        count++
        
        if (count === chunks.length) {
          resolve(spark.end())
        } else {
          loadNext(count)
        }
      }
      reader.readAsArrayBuffer(chunks[index])
    }
    
    loadNext(0)
  })
}

性能优化：对于超过1GB的文件，我们采用抽样计算策略，只读取文件头尾和中间部分的内容来计算指纹，将计算时间从平均15秒缩短到3秒以内。

4. 断点续传实现

4.1 上传状态管理

我们设计了三种状态记录：

1. 已上传分块列表
2. 正在上传分块队列
3. 待上传分块队列

javascript复制class UploadState {
  constructor(fileHash, totalChunks) {
    this.fileHash = fileHash