当前位置：首页 > news >正文

大文件上传实现

news 来源：原创 2025/5/24 6:48:47

大文件上传实现

1.将文件切割成多个小文件
2.将小文件上传到服务器
3.后端将小文件合并成一个大文件

<!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="file" />
    <button id="upload">上传</button>
    <script>
      const fileInput = document.getElementById("file");
      const uploadBtn = document.getElementById("upload");

      uploadBtn.addEventListener("click", () => {
        const file = fileInput.files[0];
        const chunkSize = 1024 * 1024; // 每个切片的大小为1MB
        const chunks = Math.ceil(file.size / chunkSize); // 计算切片的数量

        for (let i = 0; i < chunks; i++) {
          const start = i * chunkSize;
          const end = Math.min(start + chunkSize, file.size);
          const chunk = file.slice(start, end); // 切割文件

          // 将切片上传到服务器
          uploadChunk(chunk, i, chunks);
        }
      });

      function uploadChunk(chunk, index, totalChunks) {
        const formData = new FormData();
        formData.append("file", chunk);
        formData.append("index", index);
        formData.append("totalChunks", totalChunks);

        // 打印切片的信息
        console.log(`切片${index + 1}/${totalChunks}：${chunk.size}字节`);

        // 发送POST请求将切片上传到服务器
        //   fetch("/upload", {
        //     method: "POST",
        //     body: formData,
        //   })
        //     .then((res) => res.json())
        //     .then((data) => {
        //       console.log(data);
        //     });
      }
    </script>
  </body>
</html>