HTML5结合Vue3实现百万文件分块上传的思路是什么？

大文件上传方案探索：从WebUploader到自定义分片上传的实践

作为一名前端开发工程师，最近遇到了一个颇具挑战性的需求：需要在Vue项目中实现4GB左右大文件的稳定上传，且要兼容Chrome、Firefox、Edge等主流浏览器，后端使用PHP接收。此前我们采用了百度开源的WebUploader组件，但在实际使用中遇到了几个难以解决的问题：

分片上传过程中偶尔会出现断点续传失效的情况
对新版浏览器的兼容性不够理想
缺乏官方技术支持，社区活跃度下降
自定义UI的灵活性不足

方案选型思考

经过技术调研，我评估了以下几个主流方案：

Plupload：功能全面但文档不够友好，对Vue集成支持一般
Uppy：现代感强但体积较大，学习曲线较陡
Resumable.js：专注分片上传但UI较为基础
自定义实现：基于XMLHttpRequest/Fetch API实现核心分片逻辑

最终决定采用自定义分片上传方案，主要基于以下考虑：

完全控制上传流程
可以针对业务需求深度优化
减少第三方依赖，降低维护成本
与Vue生态无缝集成

核心实现思路

1. 前端分片策略

javascript 复制代码

// 文件分片工具函数
const chunkFile = (file, chunkSize = 5 * 1024 * 1024) => {
  const chunks = []
  let current = 0
  while (current < file.size) {
    chunks.push({
      file: file.slice(current, current + chunkSize),
      chunkIndex: chunks.length,
      totalChunks: Math.ceil(file.size / chunkSize),
      fileName: file.name,
      fileSize: file.size,
      fileType: file.type,
      fileLastModified: file.lastModified,
      identifier: generateFileIdentifier(file) // 生成唯一标识用于断点续传
    })
    current += chunkSize
  }
  return chunks
}

// 生成文件唯一标识（基于文件内容）
const generateFileIdentifier = (file) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onload = (e) => {
      const arr = new Uint8Array(e.target.result)
      const hashArray = Array.from(arr).map(b => b.toString(16).padStart(2, '0'))
      resolve(hashArray.join('').substring(0, 16))
    }
    reader.readAsArrayBuffer(file.slice(0, 1024 * 1024)) // 取前1MB计算哈希
  })
}

2. Vue组件实现

vue 复制代码

export default {
  data() {
    return {
      file: null,
      chunks: [],
      uploadStatus: 'idle', // idle, uploading, paused, completed, error
      progress: 0,
      error: null,
      currentChunk: 0,
      abortController: null
    }
  },
  methods: {
    async handleFileChange(e) {
      this.file = e.target.files[0]
      if (!this.file) return
      
      // 生成文件标识（简化版，实际项目应使用更可靠的算法）
      const identifier = await this.generateSimpleIdentifier(this.file)
      
      // 检查服务器是否有未完成的上传记录
      const res = await this.checkUploadStatus(identifier)
      if (res.exists) {
        if (confirm('检测到未完成的上传，是否继续？')) {
          this.currentChunk = res.uploadedChunks
        } else {
          // 清除服务器记录（实际项目应实现）
        }
      }
      
      this.chunks = this.chunkFile(this.file)
      this.progress = Math.round((this.currentChunk / this.chunks.length) * 100)
    },
    
    async startUpload() {
      if (!this.file) return
      
      this.uploadStatus = 'uploading'
      this.error = null
      this.abortController = new AbortController()
      
      try {
        for (let i = this.currentChunk; i < this.chunks.length; i++) {
          if (this.uploadStatus !== 'uploading') break // 处理暂停情况
          
          const chunk = this.chunks[i]
          const formData = new FormData()
          formData.append('file', chunk.file)
          formData.append('chunkIndex', chunk.chunkIndex)
          formData.append('totalChunks', chunk.totalChunks)
          formData.append('fileName', chunk.fileName)
          formData.append('fileSize', chunk.fileSize)
          formData.append('fileType', chunk.fileType)
          formData.append('identifier', chunk.identifier)
          
          await this.uploadChunk(formData)
          
          this.currentChunk = i + 1
          this.progress = Math.round(((i + 1) / this.chunks.length) * 100)
        }
        
        if (this.uploadStatus === 'uploading') {
          await this.mergeChunks(this.chunks[0].identifier, this.chunks[0].fileName)
          this.uploadStatus = 'completed'
          this.$emit('upload-complete')
        }
      } catch (err) {
        console.error('上传失败:', err)
        this.error = err.message || '上传过程中出现错误'
        this.uploadStatus = 'error'
      }
    },
    
    async uploadChunk(formData) {
      return fetch('/api/upload-chunk.php', {
        method: 'POST',
        body: formData,
        signal: this.abortController.signal
      })
    },
    
    async mergeChunks(identifier, fileName) {
      return fetch('/api/merge-chunks.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ identifier, fileName })
      })
    },
    
    // 简化版标识生成（实际项目应使用更可靠的算法）
    generateSimpleIdentifier(file) {
      return `${file.name}-${file.size}-${file.lastModified}`
    },
    
    async checkUploadStatus(identifier) {
      // 实际项目应实现与后端的交互
      return { exists: false, uploadedChunks: 0 }
    },
    
    pauseUpload() {
      if (this.uploadStatus === 'uploading') {
        this.abortController.abort()
        this.uploadStatus = 'paused'
      }
    },
    
    resumeUpload() {
      if (this.uploadStatus === 'paused') {
        this.startUpload()
      }
    }
  }
}

3. PHP后端实现要点

php 复制代码

 $chunkIndex,
            'totalChunks' => $totalChunks,
            'fileName' => $fileName,
            'uploaded' => time()
        ]));
    
    echo json_encode(['status' => 'success']);
} else {
    http_response_code(500);
    echo json_encode(['status' => 'error', 'message' => 'Failed to save chunk']);
}

// merge-chunks.php - 合并分片
header('Content-Type: application/json');

$uploadDir = '/path/to/upload/dir/';
$tempDir = $uploadDir . 'temp/';

$data = json_decode(file_get_contents('php://input'), true);
$identifier = $data['identifier'] ?? '';
$fileName = $data['fileName'] ?? '';

// 检查标识符和文件名
if (empty($identifier) || empty($fileName)) {
    http_response_code(400);
    echo json_encode(['status' => 'error', 'message' => 'Invalid parameters']);
    exit;
}

// 检查上传状态文件
$statusFile = $tempDir . $identifier . '.upload';
if (!file_exists($statusFile)) {
    http_response_code(404);
    echo json_encode(['status' => 'error', 'message' => 'Upload not found']);
    exit;
}

$status = json_decode(file_get_contents($statusFile), true);
$totalChunks = $status['totalChunks'] ?? 0;

// 合并文件
$finalPath = $uploadDir . $fileName;
if ($fp = fopen($finalPath, 'wb')) {
    for ($i = 0; $i < $totalChunks; $i++) {
        $chunkPath = $tempDir . $identifier . '_' . $i;
        if (!file_exists($chunkPath)) {
            fclose($fp);
            unlink($finalPath); // 删除已创建的部分文件
            http_response_code(400);
            echo json_encode(['status' => 'error', 'message' => 'Missing chunk ' . $i]);
            exit;
        }
        
        $content = file_get_contents($chunkPath);
        fwrite($fp, $content);
        unlink($chunkPath); // 删除已合并的分片
    }
    fclose($fp);
    
    // 删除状态文件
    unlink($statusFile);
    
    echo json_encode(['status' => 'success', 'path' => $finalPath]);
} else {
    http_response_code(500);
    echo json_encode(['status' => 'error', 'message' => 'Failed to create final file']);
}
?>