前端分片上传

最新推荐文章于 2024-05-22 17:51:14 发布

jsPao

最新推荐文章于 2024-05-22 17:51:14 发布

阅读量332

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/array__/article/details/134520822

版权

前端分片上传是一种将大文件分成若干个小块进行上传的方式，以解决大文件上传时网络不稳定或上传速度慢的问题。下面是前端分片上传的基本步骤：

使用JavaScript读取文件，将文件分成若干块。可以使用File API来实现这个功能。
使用XMLHttpRequest对象或Fetch API向服务器发送每一块。在发送每一块时，需要设置HTTP请求的Range头标来标识当前上传的位置。
服务器接收到块之后，将块保存到硬盘或内存中。在保存块时，需要注意块的顺序必须与文件的顺序相同。
当所有块都上传完毕之后，服务器将所有块组合成一个完整的文件。可以使用Node.js的fs模块来实现这个功能。

示例：

<!DOCTYPE html>  
<html>  
<head>  
  <title>File Upload</title>  
</head>  
<body>  
  <input type="file" id="file-upload" />  
  <button id="upload-btn">Upload</button>  
  
  <script>  
    const fileInput = document.getElementById('file-upload');  
    const uploadButton = document.getElementById('upload-btn');  
    let file;  
    let totalChunks = 0;  
    let currentChunk = 0;  
    let chunks = [];  
  
    function uploadFile() {  
      file = fileInput.files[0];  
      const chunkSize = 1024 * 1024; // 1MB  
      totalChunks = Math.ceil(file.size / chunkSize);  
      for (let i = 0; i < totalChunks; i++) {  
        const start = i * chunkSize;  
        const end = Math.min(file.size, start + chunkSize);  
        const chunk = file.slice(start, end);  
        chunks.push(chunk);  
      }  
      uploadChunks();  
    }  
  
    function uploadChunks() {  
      if (currentChunk < totalChunks) {  
        const xhr = new XMLHttpRequest();  
        const formData = new FormData();  
        formData.append('chunk', chunks[currentChunk]);  
        xhr.open('POST', '/upload', true);  
        xhr.onload = function() {  
          if (xhr.status === 200) {  
            currentChunk++;  
            uploadChunks();  
          } else {  
            alert('Upload failed!');  
          }  
        };  
        xhr.send(formData);  
      } else {  
        alert('Upload successful!');  
      }  
    }  
  
    uploadButton.addEventListener('click', uploadFile);  
  </script>  
</body>  
</html>