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

大文件上传实现

article 2025/3/18 16:42:34

大文件上传实现

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>

查看全文

原文地址:https://blog.csdn.net/weixin_44801790/article/details/146293658
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.kler.cn/a/589986.html 如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！