Vue3大文件分块上传与断点续传实战

1. 项目背景与需求分析

作为一名大三学生接到导师布置的"10G大文件上传系统"开发任务，确实是个不小的挑战。这个系统需要实现以下几个核心功能：

1. 大文件分块上传：支持10GB以上超大文件上传
2. 断点续传：网络中断或页面刷新后能继续上传
3. 文件夹结构保留：上传文件夹时保持原有层级关系
4. 全浏览器兼容：包括老旧浏览器如IE8
5. 加密传输存储：保障文件传输和存储安全

这些需求在实际开发中非常常见，比如网盘系统、企业文档管理系统等都需要类似功能。接下来我将分享如何用Vue3实现这样一个系统。

2. 技术选型与架构设计

2.1 前端技术栈

经过调研，我选择了以下技术组合：

• Vue3：当前最流行的前端框架，组合式API更适合复杂逻辑
• WebUploader：百度开源的强大上传组件，支持分块和断点续传
• SparkMD5：纯JavaScript实现的MD5计算库，用于文件校验
• localForage：改进的本地存储方案，解决localStorage容量限制

2.2 后端技术栈

• Python Flask：轻量级后端框架，适合快速开发REST API
• 阿里云OSS：对象存储服务，解决大文件存储问题
• MySQL：存储文件元数据和上传状态

2.3 系统架构

整个系统的工作流程如下：

1. 前端将大文件分块（默认5MB/块）
2. 计算文件MD5作为唯一标识
3. 上传前先查询服务器已上传的块
4. 只上传缺失的块
5. 所有块上传完成后通知服务器合并
6. 服务器将分块合并为完整文件并存储到OSS

3. 前端核心实现

3.1 文件分块处理

javascript复制// 文件分块函数
function createFileChunks(file, chunkSize = 5 * 1024 * 1024) {
  const chunks = []
  let cur = 0
  while (cur < file.size) {
    chunks.push({
      index: chunks.length,
      file: file.slice(cur, cur + chunkSize)
    })
    cur += chunkSize
  }
  return chunks
}

这个函数将文件分割成指定大小的块，每个块包含原始数据和一个索引号。

3.2 文件指纹计算

使用SparkMD5计算文件MD5作为唯一标识：

javascript复制import SparkMD5 from 'spark-md5'

async function calculateFileHash(file) {
  return new Promise(resolve => {
    const spark = new SparkMD5.ArrayBuffer()
    const reader = new FileReader()
    const chunkSize = 2 * 1024 * 1024 // 2MB
    let cur = 0
    
    reader.onload = e => {
      spark.append(e.target.result)
      cur += chunkSize
      if (cur < file.size) {
        loadNext()
      } else {
        resolve(spark.end())
      }
    }
    
    function loadNext() {
      const chunk = file.slice(cur, cur + chunkSize)
      reader.readAsArrayBuffer(chunk)
    }
    
    loadNext()
  })
}

3.3 上传状态管理

使用localForage保存上传状态：

javascript复制import localforage from 'localforage'

const uploadStatus = {
  // 保存上传状态
  async saveStatus(fileHash, status) {
    await localforage.setItem(`upload_${fileHash}`, status)
  },
  
  // 获取上传状态
  async getStatus(fileHash) {
    return await localforage.getItem(`upload_${fileHash}`) || {
      uploadedChunks: [],
      uploadedSize: 0
    }
  },
  
  // 清除上传状态
  async clearStatus(fileHash) {
    await localforage.removeItem(`upload_${fileHash}`)
  }
}

3.4 分块上传实现

javascript复制async