大文件分片上传：突破 HTML5 限制

2023-10-03 08:10:13

如何用 HTML5 实现分片上传 GB 级大文件

在当今数据密集的时代，我们经常需要上传超大型文件，如视频、图像或科学数据集。然而，传统的文件上传方法在处理 GB 级文件时遇到了瓶颈，尤其是对于受浏览器限制的 HTML5 应用程序。本文将提供一个创新的解决方案，使用 HTML5 实现分片上传，以轻松处理 GB 级大文件。

挑战：浏览器文件大小限制

HTML5 浏览器对单个文件上传大小施加了限制，通常为 2GB 或 500MB。对于需要上传 GB 级文件的情况，这会带来显着挑战。

分片上传的原理

分片上传将大文件分解成较小的分片，这些分片可以独立上传并重新组合在服务器端。这绕过了浏览器文件大小限制，允许上传超大型文件。

使用 HTML5 实现分片上传

1. 创建分片

将大文件分割成大小均匀的分片，例如 5MB 或 10MB。每个分片都是一个单独的文件块，带有其自己的唯一标识符。

2. 使用 XMLHttpRequest 分片上传

使用 XMLHttpRequest 对象以异步方式上传分片。XMLHttpRequest 允许分块文件上传，并在分片上传完成后触发事件。

3. 服务器端重新组装

服务器端接收到分片后，将其重新组装成原始文件。服务器需要跟踪已上传的分片，并在收到所有分片后完成重新组装过程。

4. 进度跟踪和错误处理

分片上传过程应该提供进度更新，以便用户可以跟踪上传进度。同时，需要实现错误处理机制以处理网络中断或其他故障。

示例代码

以下示例演示了 HTML5 分片上传的 JavaScript 实现：

// 分片大小（以字节为单位）
const CHUNK_SIZE = 5 * 1024 * 1024;

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 处理分片上传
const uploadChunk = (chunkIndex, startByte, endByte) => {
  // 创建 FormData 对象并附加分片
  const formData = new FormData();
  formData.append('file', file.slice(startByte, endByte));

  // 设置请求参数
  xhr.open('POST', '/upload');
  xhr.setRequestHeader('Content-Type', 'multipart/form-data');
  xhr.setRequestHeader('Content-Range', `bytes ${startByte}-${endByte}/${file.size}`);

  // 发送请求
  xhr.send(formData);
};

// 文件分片
for (let i = 0; i < Math.ceil(file.size / CHUNK_SIZE); i++) {
  // 计算分片起始和结束字节
  const startByte = i * CHUNK_SIZE;
  const endByte = Math.min(startByte + CHUNK_SIZE, file.size);

  // 上传分片
  uploadChunk(i, startByte, endByte);
}