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>

附加：断点续传

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

巴特西

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

最新文章

热门文章