js实现文件的分片上传

大文件分片上传是为了避免一次性上传大文件可能带来的各种问题（如网络不稳定导致的传输失败、服务器端接收缓慢等），将文件分割成多个小块（即分片），分片依次上传，最终在服务器端将所有分片重新合并成完整文件。下面是实现大文件分片上传的原理详解：

1. 文件分片
文件分片是将大文件按照一定大小（如1MB或5MB）切分成多个小片段。可以使用JavaScript中的Blob对象来实现分片：

const file = document.getElementById('fileInput').files[0]; // 获取文件
const chunkSize = 5 * 1024 * 1024; // 每个分片大小为5MB
const chunks = Math.ceil(file.size / chunkSize); // 分片总数

for (let i = 0; i < chunks; i++) {
  const start = i * chunkSize;
  const end = Math.min(file.size, start + chunkSize);
  const chunk = file.slice(start, end); // 创建分片
  // 这里可以将分片保存到一个数组中或直接上传
}

2. 上传分片
每个分片通过XMLHttpRequest或fetch API上传到服务器。可以为每个分片生成唯一标识符，以便服务器能够正确合并：

const uploadChunk = (chunk, index) => {
  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('index', index);
  formData.append('fileName', file.name);
  
  fetch('/upload', {
    method: 'POST',
    body: formData,
  }).then(response => {
    if (response.ok) {
      console.log(`Chunk ${index} uploaded successfully`);
    } else {
      console.error(`Failed to upload chunk ${index}`);
    }
  }).catch(error => {
    console.error(`Error uploading chunk ${index}:`, error);
  });
};

3. 合并分片
服务器接收到所有分片后，需要将它们按照顺序合并成一个完整的文件。

涉及js全部代码地址如下：
https://download.csdn.net/download/u012953777/89540795