前端大文件分块上传

大文件上传是一个复杂的过程，尤其是在前端，我们需要考虑用户体验、网络状况、文件完整性等多个方面。
以下是一个使用HTML5的File API和XMLHttpRequest进行大文件分块上传的详解和示例代码。

一、前端分块上传流程

选择文件：使用<input type="file">元素让用户选择文件。
读取文件：使用FileReader API读取文件内容。
分块文件：根据设定的大小将文件切割成多个小块。
上传分块：使用XMLHttpRequest或fetch API将每个分块上传到服务器。
合并文件：服务器接收到所有分块后，将其合并成完整的文件。

二、示例代码

以下是一个简单的示例代码，展示了如何使用JavaScript实现大文件的分块上传。

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>大文件分块上传</title>  
</head>  
<body>  <input type="file" id="fileInput">  <button id="uploadButton">上传</button>  <script>  const chunkSize = 1024 * 1024; // 每块大小设置为1MB  let fileInput = document.getElementById('fileInput');  let uploadButton = document.getElementById('uploadButton');  uploadButton.addEventListener('click', function () {  let file = fileInput.files[0];  let chunks = Math.ceil(file.size / chunkSize); // 计算文件块数（文件总大小 / 每块大小）let currentChunk = 0; // 当前上传的块数  function uploadChunk() {  if (currentChunk < chunks) {  let start = currentChunk * chunkSize; // 计算当前要上传的分片的起始字节位置（已经上传的字节）let end = Math.min(file.size, start + chunkSize);   // 计算当前要上传的分片的结束字节位置let chunk = file.slice(start, end);  let formData = new FormData();  formData.append('chunk', chunk);  formData.append('fileName', file.name);  formData.append('totalChunks', chunks);  formData.append('currentChunk', currentChunk);  let xhr = new XMLHttpRequest();  xhr.open('POST', '/upload', true); // 替换为你的上传接口  xhr.upload.onprogress = function (e) {  if (e.lengthComputable) {  console.log((e.loaded / e.total * 100) + '%');  }  };  xhr.onload = function () {  if (xhr.status === 200) {  currentChunk++;  uploadChunk(); // 递归上传下一个块  } else {  console.error('上传失败');  }  };  xhr.send(formData);  } else {  console.log('上传完成');  }  }  uploadChunk(); // 开始上传第一个块  });  </script>  
</body>  
</html>