js实现大文件上传——分片上传方法

当前端在开发过程中遇到上传文件需求，如果是上传头像、图片小文件之类的，可以正常按上传流程处理。但是当遇到上传大文件需求时，几个G或者十几个G，那么需要将这么大的文件分割成许多小片段分别上传，这种实现思路称为分片上传。

实现分片上传，精髓就是将文件分割成小片段，此时我们需要用到FormData对象和Bolb对象。

核心代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  
  </style>
</head>
<body>
  <input type="file" name="file" id="file">
  <button id="upload" onClick="upload()">上传</button>
  <script>
      //设置每个切片大小
      let bytesPerPiece = 1024*1024
      //上传文件函数
      function upload(){
          //获取上传文件
          let file = document.getElementById('file').files[0];
          let start = 0, end, index = 0, filesize = file.size, name = file.name;
          //计算切片总数
          let totalPieces = Math.ceil(filesize/bytesPerPiece);
          while(start < totalPieces){
              end = start + bytesPerPiece;
              if(end > filesize){ 
                  end = filesize
              }
              let chunk = file.slice(start, end);
              let formData = new FormData();
              formData.append('file', chunk, filename);
              //原生js发请求
              //   let xhr = new XMLHttpRequest();
              //   xhr.onreadystatechange = function(){
              //       if(this.readyState == 4 && this.status == 200){

              //       }
              //   }
              //   xhr.open('post', '/api/upload', true);
              //   xhr.send(formData);
              // 使用jquery,需要将contentType，processData设置为false
            //   $.ajax({
            //       url: '/api/upload',
            //       type: 'post',
            //       data: formData,
            //       processData: false,
            //       contentType: false
            //   }).success(res=>{

            //   }).error(err=>{

            //   })
          }
      }
  </script>
</body>
</html>

附加：断点续传

理解：断点续传，就是在我们上传过程中由于意外原因断网断电情况让上传终止了，那么上传的是不完整的，我们需要向服务器查询一下相同名字的文件大小，然后将上传位置设置成这个大小即可。

参考文章：http://blog.ncmem.com/wordpress/2023/11/14/js%e5%ae%9e%e7%8e%b0%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0-%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0%e6%96%b9%e6%b3%95/

欢迎入群一起讨论