• 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>

    附加: 断点续传

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

  • 相关阅读:
    2.最详细的WSDD配置文件注释
    1.Apache Axis配置文件WSDD详解
    26. Intellij IDEA 启动项目ClassNotFoundException
    警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property ..
    Java 远程通讯技术及原理分析
    Hibernate 中配置属性详解(hibernate.properties)
    SSH之IDEA2017整合Struts2+Spring+Hibernate
    java对象与json对象间的相互转换
    25.怎样在IDEA中使用JUnit4和JUnitGenerator V2.0自动生成测试模块
    24. 在IDEA中使用JUnit进行方法测试
  • 原文地址:https://www.cnblogs.com/zmyxixihaha/p/13534120.html
Copyright © 2020-2023  润新知