实现前端断点续传的方法与技巧

在传输大文件时，断点续传是一种非常有用的技术。它可以将文件分割成小块，一块一块地传输并记录已经传输的部分，如果传输中断，可以从中断的位置继续传输，减少网络传输的时间和资源消耗。在前端实现断点续传可以提高用户体验并减少传输不必要的数据。

1. 切割文件

要实现断点续传，首先要将大文件切割成小块。在前端可以使用FileReader对象读取文件内容，然后使用slice方法切割文件，将文件切割成指定大小的块。这样每个块都可以独立传输，方便后续的断点续传操作。

function splitFile(file, chunkSize) {
  const fileSize = file.size;
  const chunks = Math.ceil(fileSize / chunkSize);
  const fileChunks = [];

  let start = 0;
  let end = chunkSize;

  while (start < fileSize) {
    fileChunks.push(file.slice(start, end));
    start = end;
    end = start + chunkSize;
  }

  return fileChunks;
}

2. 上传文件块

将文件切割成块后，我们可以开始上传每个块。对于每个文件块，我们需要发送一个带有正确Content-Range头的HTTP请求到服务器。

function uploadChunk(chunk, chunkIndex, totalChunks, fileId) {
  const xhr = new XMLHttpRequest();
  const formData = new FormData();

  formData.append('chunk', chunk);
  formData.append('chunkIndex', chunkIndex);
  formData.append('totalChunks', totalChunks);
  formData.append('fileId', fileId);

  xhr.open('POST', 'upload-url', true);
  xhr.setRequestHeader('Content-Range', `bytes ${chunkIndex}-${chunkIndex + chunk.size - 1}/${totalChunks * chunk.size}`);

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 上传成功，继续上传下一个块
      const response = JSON.parse(xhr.responseText);
      const nextChunkIndex = response.nextChunkIndex;
      if (nextChunkIndex < totalChunks) {
        uploadChunk(fileChunks[nextChunkIndex], nextChunkIndex, totalChunks, fileId);
      } else {
        // 完成上传
        console.log('上传完成');
      }
    } else {
      // 上传失败
      console.error('上传失败');
    }
  };

  xhr.send(formData);
}

3. 断点续传

如果传输中断，我们需要记录已经传输的块，以便下次恢复传输。在传输过程中，可以使用xhr.upload.onprogress事件来监听上传进度，并记录已经传输的块索引。

let firstUnuploadedChunkIndex = 0; // 未上传的第一个块索引
let lastUploadedChunkIndex = -1; // 已上传的最后一个块索引

xhr.upload.onprogress = function(event) {
  const loaded = event.loaded;
  const total = event.total;
  const progress = Math.round(loaded / total * 100);

  if (progress === 100) {
    // 当前块上传完成
    lastUploadedChunkIndex++;
    firstUnuploadedChunkIndex = lastUploadedChunkIndex + 1;
  }
};

在下次上传时，只需要从firstUnuploadedChunkIndex开始上传即可。

4. 服务器端支持

前端实现了断点续传的功能，服务器端也需要相应的支持。服务器端需要根据Content-Range头和块信息来合并文件块，以及记录已上传的块。

总结

使用断点续传技术可以大大提高大文件的传输效率和用户体验。前端实现断点续传需要进行文件切割和上传文件块的操作，同时还需要记录已上传的块索引以便下次断点续传时使用。服务器端也需要相应的支持来处理断点续传的请求和合并文件块。通过以上方法与技巧，我们可以实现一个功能强大的前端断点续传功能。

本文来自极简博客，作者：沉默的旋律，转载请注明原文链接：实现前端断点续传的方法与技巧