js实现切片上传大文件

实现切片上传大文件需要以下步骤：

将大文件切片成多个小文件，每个小文件的大小为固定的值，比如5MB。
使用JavaScript的File API读取每个小文件，然后通过Ajax或者WebSocket上传到服务器。
服务器接收到每个小文件后，将它们合并成一个完整的大文件。

以下是一个基本的实现示例：

HTML代码：

<input type="file" id="fileInput">
<button id="uploadBtn">Upload</button>

JavaScript代码：

const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');
const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB

let file;
let fileSize;
let chunkCount;
let chunkIndex = 0;

fileInput.addEventListener('change', () => {
  file = fileInput.files[0];
  fileSize = file.size;
  chunkCount = Math.ceil(fileSize / CHUNK_SIZE);
});

uploadBtn.addEventListener('click', () => {
  while (chunkIndex < chunkCount) {
    const start = chunkIndex * CHUNK_SIZE;
    const end = Math.min(start + CHUNK_SIZE, fileSize);
    const chunk = file.slice(start, end);
    uploadChunk(chunk, chunkIndex);
    chunkIndex++;
  }
});

function uploadChunk(chunk, index) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.setRequestHeader('Content-Type', 'application/octet-stream');
  xhr.setRequestHeader('X-Chunk-Index', index);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      console.log('Chunk uploaded successfully');
    }
  };
  xhr.send(chunk);
}

在这个示例中，我们使用了JavaScript的File API读取选择的文件，然后将它切成多个小文件。每个小文件的大小为5MB。然后，我们使用按钮的点击事件触发上传。我们循环遍历每个小文件，并使用XMLHttpRequest对象将它们上传到服务器。在每个小文件的请求头中，我们设置了X-Chunk-Index头，它表示当前上传的小文件的索引。服务器可以使用这个索引来合并小文件。一旦所有小文件都上传完毕，我们可以提示用户上传成功。