JavaScript 实现大文件上传的方法

在现代的 Web 应用中，大文件上传是一个常见的需求。然而，由于文件较大，上传过程可能会面临一些挑战。
一、前端准备工作

1. 选择文件：通过文件选择器让用户选择要上传的大文件。
2. 获取文件信息：获取文件的名称、大小、类型等信息。

二、分片上传

对于大文件，通常采用分片上传的方式。

1. 计算分片大小：根据服务器的要求或网络状况，确定合适的分片大小。
2. 分割文件：将文件分割成多个小分片。

三、上传流程

1. 发送请求：使用 XMLHttpRequest 或 fetch 等方式发送上传请求。
2. 上传分片：逐个上传分片，并在上传过程中处理进度信息。

四、进度监控

1. 监听上传事件：通过 onprogress 事件获取上传进度。
2. 显示进度：将上传进度实时显示给用户。

五、并发上传

为了提高上传效率，可以考虑并发上传多个分片。

1. 控制并发数量：根据服务器的承受能力和网络状况，合理控制并发上传的分片数量。

六、断点续传

如果上传过程中出现中断，支持断点续传是很重要的。

1. 记录上传状态：在本地记录已上传的分片信息。
2. 恢复上传：在重新上传时，根据记录的信息继续上传未完成的分片。

七、与服务器的交互

1. 服务器端支持：服务器需要支持分片上传和断点续传的功能。
2. 接收分片：服务器接收并处理上传的分片。

八、错误处理

在上传过程中，要及时处理可能出现的错误，如网络错误、服务器错误等。

九、优化措施

1. 压缩文件：在上传前对文件进行压缩，以减少传输的数据量。
2. 缓存上传信息：将上传相关的信息缓存起来，以便在重新加载页面时能够继续上传。

十、示例代码

以下是一个简单的大文件上传示例代码：

// 选择文件
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', handleFileSelect);

function handleFileSelect(event) {
   
  const file = event.target.files[0];

  // 计算分片大小
  const chunkSize = 1024 * 1024; // 1MB 分片大小

  // 分割文件
  const chunks = [];
  let offset = 0;
  while (offset < file.size) {
   
    chunks.push(file.slice(offset, offset + chunkSize));
    offset += chunkSize;
  }

  // 上传分片
  uploadChunks(chunks);
}

function uploadChunks(chunks) {
   
  let currentChunk = 0;

  function uploadNextChunk() {
   
    if (currentChunk < chunks.length) {
   
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/upload');
      xhr.upload.onprogress = handleProgress;

      xhr.send(chunks[currentChunk]);

      currentChunk++;
      uploadNextChunk();
    }
  }

  uploadNextChunk();
}

function handleProgress(event) {
   
  const progress = (event.loaded / event.total) * 100;
  console.log(`上传进度: ${
     progress}%`);
}

通过以上步骤和方法，我们可以实现较为可靠和高效的大文件上传功能。当然，具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。