javascript之分片上传，断点续传的实际项目实现详解

首先，我们需要了解什么是分片上传和断点续传。

分片上传是将大文件分成多个小块进行上传，每个小块可以独立上传，从而提高上传速度和稳定性。而断点续传是指在上传大文件时，当上传过程中因断网或其他原因中断，再次上传时可以不用重头开始，而是从中断的地方继续上传。

接下来是分片上传和断点续传的具体实现步骤：

1. 切分文件。将大文件按照指定的大小切分成多个小块，一般大小在5MB~10MB之间比较合适。可以使用 FileReader API 读取文件内容，使用 Blob 对象切割文件。

function sliceFile(file, sliceSize) {
  const chunks = [];
  let start = 0;
  let end;
  while (start < file.size) {
    end = Math.min(start + sliceSize, file.size);
    chunks.push({ file: file.slice(start, end), start, end });
    start += sliceSize;
  }
  return chunks;
}

1. 上传小块。将切分的小块一个一个地上传到服务器，可以使用 XMLHttpRequest 或 fetch API 实现。可以使用 FormData 对象将文件数据上传到服务器。

function uploadChunk(serverUrl, chunkData) {
  const formData = new FormData();
  formData.append('file', chunkData.file);
  formData.append('start', chunkData.start);
  formData.append('end', chunkData.end);
  return fetch(serverUrl, {
    method: 'POST',
    body: formData,
  });
}

1. 合并文件。当所有小块上传完成后，需要将文件块合并成一个完整的文件，可以使用 Node.js 服务器将文件块合并。在客户端上传时需要携带上传唯一标识以备后续合并。

function mergeChunks(serverUrl, file, chunks, fileHash) {
  const formData = new FormData();
  formData.append('file', file);
  formData.append('chunks', chunks.length);
  formData.append('fileHash', fileHash);
  return fetch(serverUrl, {
    method: 'POST',
    body: formData,
  });
}

1. 实现断点续传。如果在上传过程中意外中断，可以记录已上传的小块和未上传的小块，再次上传时从未上传的小块开始上传，已上传的小块可以不用重复上传。可以使用 IndexedDB 或 Web SQL 数据库记录上传进度，避免上传过程中出现异常导致数据丢失。

参考文章：http://blog.ncmem.com/wordpress/2023/10/19/javascript%e4%b9%8b%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0%ef%bc%8c%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0%e7%9a%84%e5%ae%9e%e9%99%85%e9%a1%b9%e7%9b%ae%e5%ae%9e%e7%8e%b0%e8%af%a6%e8%a7%a3/

欢迎入群一起讨论