前端大文件分片上传与断点续传实战指南

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

前端开发中处理大文件上传是个经典难题。传统表单上传在遇到几百MB甚至GB级文件时，往往会面临浏览器卡死、上传超时、网络波动导致重传等问题。我曾在实际项目中遇到过用户上传3GB设计稿失败后不得不反复重试的案例，这种体验显然无法接受。

HTML5带来的File API和Blob对象为我们提供了新的解决思路。通过将大文件切割成小块（分片），配合服务端的合并逻辑，不仅能规避单次上传体积限制，还能实现上传进度的精确控制。更关键的是，当网络中断或用户暂停后，可以从已上传的分片位置继续传输（断点续传），避免重复劳动。

2. 核心实现原理拆解

2.1 文件分片处理机制

前端通过File.prototype.slice方法实现物理分片。假设我们有一个500MB的文件，设置每个分片为5MB，则会产生100个有序分片。每个分片需要包含以下元信息：

javascript复制{
  chunk: Blob对象,
  hash: '分片唯一标识', // 通常用"文件hash+分片序号"生成
  index: 分片序号,
  total: 总分片数,
  filename: '原始文件名'
}

关键点：分片大小需要权衡。过小会导致请求数爆炸（如1MB分片对500MB文件会产生500次请求），过大会失去分片意义。建议根据实际网络环境测试，通常2-10MB为宜。

2.2 断点续传实现逻辑

服务端需要维护一个上传状态记录表，结构示例如下：

当客户端初始化上传时，先请求接口获取已上传分片列表，前端跳过这些分片的上传。伪代码实现：

javascript复制async function checkUploadedChunks(fileHash) {
  const { data } = await axios.get('/upload/status', { params: { fileHash } })
  return data.uploadedIndexes // 如[0,1,2]表示前三个分片已传完
}

3. 完整实现步骤

3.1 前端核心代码实现

文件分片生成：

javascript复制function createFileChunks(file, chunkSize = 5 * 1024 * 1024) {
  const chunks = []
  let cur = 0
  while (cur < file.size) {
    chunks.push({
      chunk: file.slice(cur, cur + chunkSize),
      hash: `${file.name}-${chunks.length}`,
      index: chunks.length,
      total: Math.ceil(file.size / chunkSize)
    })
    cur += chunkSize
  }
  return chunks
}

分片上传控制：

javascript复制async function uploadChunks(chunks, uploadedIndexes = []) {
  const requests = chunks
    .filter(chunk => !uploadedIndexes.includes(chunk.index))
    .map((chunk) => {
      const formData = new FormData()
      formData.append('chunk', chunk.chunk)
      formData.append('hash', chunk.hash)
      formData.append('index', chunk.index)
      formData.append('total', chunk.total)
      return axios.post('/upload/chunk', formData)
    })
  
  await Promise.all(requests)
}

3.2 服务端关键逻辑

分片接收（Node.js示例）：

javascript复制router.post('/chunk', async (ctx) => {
  const { index, hash, total } = ctx.request.body
  const chunkFile = ctx.request.files.chunk
  
  // 存储分片到临时目录
  const chunkDir = path.join(UPLOAD_DIR, hash.split('-')[0])
  if (!fs.existsSync(chunkDir)) fs.mkdirSync(chunkDir)
  
  await fs.promises.rename(
    chunkFile.path,
    path.join(chunkDir, `${index}`)
  )
  
  // 更新数据库记录
  await db.updateUploadStatus(hash, index)
  
  ctx.body = { success: true }
})

文件合并：

javascript复制router.post('/merge', async (ctx) => {
  const { hash, filename } = ctx.request.body
  const chunkDir = path.join(UPLOAD_DIR, hash)
  const chunks = fs.readdirSync(chunkDir)
  
  // 确保所有分片已上传
  if (chunks.length !== parseInt(ctx.request.body.total)) {
    ctx.status = 400
    return ctx.body = { error: '分片数量不完整' }
  }
  
  // 按序号排序后合并
  chunks.sort((a, b) => a - b)
  const targetPath = path.join(UPLOAD_DIR, filename)
  await Promise.all(
    chunks.map(chunkPath => 
      fs.promises.appendFile(
        targetPath,
        fs.readFileSync(path.join(chunkDir, chunkPath))
      )
    )
  )
  
  // 清理临时分片
  fs.rmdirSync(chunkDir, { recursive: true })
  ctx.body = { success: true }
})

4. 性能优化与问题排查

4.1 上传加速策略

1. 并发控制：浏览器对同一域名有6-8个TCP连接限制。建议使用p-limit等库控制并发数：

javascript复制const limit = require('p-limit')
const concurrency = navigator.hardwareConcurrency || 4
const queue = limit(concurrency)

const requests = chunks.map(chunk => 
  queue(() => uploadSingleChunk(chunk))
)

2. 文件指纹校验：使用spark-md5计算文件hash，避免重复上传：

javascript复制async function calculateFileHash(file) {
  return new Promise(resolve => {
    const spark = new SparkMD5.ArrayBuffer()
    const reader = new FileReader()
    reader.onload = e => {
      spark.append(e.target.result)
      resolve(spark.end())
    }
    reader.readAsArrayBuffer(file)
  })
}

4.2 常见问题解决方案

问题1：分片上传后合并失败

• 检查服务端临时目录权限
• 确认所有分片使用相同命名规则
• 验证分片序号是否连续

问题2：进度显示不准确

• 使用axios的onUploadProgress事件：

javascript复制axios.post('/upload/chunk', formData, {
  onUploadProgress: progressEvent => {
    const percent = Math.round(
      (progressEvent.loaded / progressEvent.total) * 100
    )
    console.log(`分片${chunk.index}上传进度: ${percent}%`)
  }
})

问题3：大文件hash计算卡顿

• 使用抽样hash算法（如只取文件头尾+中间部分）
• Web Worker后台计算避免阻塞UI

5. 扩展功能实现

5.1 上传暂停/恢复

javascript复制let controller = new AbortController()

// 暂停上传
function pauseUpload() {
  controller.abort()
}

// 恢复上传
function resumeUpload() {
  controller = new AbortController()
  const uploaded = await getUploadedChunks()
  uploadChunks(chunks, uploaded)
}

5.2 秒传功能实现

服务端在接收文件前先校验hash：

javascript复制router.post('/verify', async (ctx) => {
  const { hash, filename } = ctx.request.body
  const filePath = path.join(UPLOAD_DIR, filename)
  
  if (fs.existsSync(filePath)) {
    return ctx.body = { shouldUpload: false }
  }
  
  const uploaded = await db.getUploadedChunks(hash)
  ctx.body = { 
    shouldUpload: true,
    uploadedIndexes: uploaded.map(item => item.index)
  }
})

6. 实际应用中的经验总结

1. 分片大小动态调整：根据网络类型（WiFi/4G）自动调整分片大小，移动端建议2MB，PC端建议5MB

2. 错误重试机制：对失败分片实现自动重试（建议最多3次）：

javascript复制async function retryUpload(chunk, retries = 3) {
  try {
    await uploadSingleChunk(chunk)
  } catch (err) {
    if (retries > 0) {
      return retryUpload(chunk, retries - 1)
    }
    throw err
  }
}

3. 内存优化：对于超大文件（10GB+），避免一次性读取所有分片信息，改用流式处理

4. 上传状态持久化：使用localStorage保存上传进度，防止页面刷新后状态丢失：

javascript复制// 保存进度
function saveProgress(fileHash, uploadedIndexes) {
  localStorage.setItem(fileHash, JSON.stringify(uploadedIndexes))
}

// 读取进度
function loadProgress(fileHash) {
  const data = localStorage.getItem(fileHash)
  return data ? JSON.parse(data) : []
}