谈一谈大文件上传——前台分片和后台合并

https://www.jianshu.com/p/bfaad1323a4c

掘金

用JavaScript和Node.js实现文件分片上传

https://juejin.im/post/5db29beb5188256467245a7b

「HTML5」FileAPI 文件操作实战

https://juejin.im/post/5d35af63e51d454fa33b199e

结合element-ui 的el-upload组件支持分片上传el-upload-piecess

https://juejin.im/post/5b9b6e81f265da0ab2281ae0

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery-3.4.1.min.js"></script>
</head>

<body>
  <input type="file" id="file" />
  <br />
  <button id="upload">上传</button>
  <br />
  <span id="output" style="font-size:12px">等待</span>
</body>


<script>
  var page = {

    init: function () {

      $("#upload").click($.proxy(this.upload, this));

    },
    upload: function () {

      var file = $("#file")[0].files[0], //文件对象

        name = file.name, //文件名

        size = file.size, //总大小

        succeed = 0;

      console.log(file)

      var shardSize = 2 * 1024 * 1024, //以2MB为一个分片

        shardCount = Math.ceil(size / shardSize); //总片数



      for (var i = 0; i < shardCount; ++i) {

        //计算每一片的起始与结束位置

        var start = i * shardSize,

          end = Math.min(size, start + shardSize);



        //构造一个表单，FormData是HTML5新增的

        var form = new FormData();

        form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分

        form.append("name", name);

        form.append("total", shardCount); //总片数

        form.append("index", i + 1); //当前是第几片



        //Ajax提交

        $.ajax({

          url: "http://192.168.0.160:3000/mock/130/admin/user_group/getList",

          type: "POST",

          data: form,

          async: true, //异步

          processData: false, //很重要，告诉jquery不要对form进行处理

          contentType: false, //很重要，指定为false才能形成正确的Content-Type

          success: function () {

            ++succeed;

            $("#output").text(succeed + " / " + shardCount);

          }

        }) //Ajax提交
      } // end for
    } // end func 
  }
  page.init();
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery-3.4.1.min.js"></script>
</head>

<body>
  <input type="file" id="file" />
  <br />
  <button id="upload">上传</button>
  <br />
  <span id="output" style="font-size:12px">等待</span>
</body>

<script>
  var page = {

    init: function () {

      $("#upload").click($.proxy(this.upload, this));

    },
    upload: function () {

      var file = $("#file")[0].files[0], //文件对象

        name = file.name, //文件名

        size = file.size, //总大小

        succeed = 0;

      console.log(file)

      var shardSize = 2 * 1024 * 1024, //以2MB为一个分片

        shardCount = Math.ceil(size / shardSize); //总片数

      for (var i = 0; i < shardCount; ++i) {

        //计算每一片的起始与结束位置

        var start = i * shardSize,

          end = Math.min(size, start + shardSize);

        //构造一个表单，FormData是HTML5新增的

        var form = new FormData();

        form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分

        form.append("name", name);

        form.append("total", shardCount); //总片数

        form.append("index", i + 1); //当前是第几片

        //Ajax提交

        $.ajax({

          url: "http://192.168.0.160:3000/mock/130/admin/user_group/getList",

          type: "POST",

          data: form,

          async: true, //异步

          processData: false, //很重要，告诉jquery不要对form进行处理

          contentType: false, //很重要，指定为false才能形成正确的Content-Type

          success: function () {

            ++succeed;

            $("#output").text(succeed + " / " + shardCount);

          }

        }) //Ajax提交
      } // end for
    } // end func 
  }
  page.init();
</script>

</html>