前端对文件进行分片

前端夏老师------<!DOCTYPE html><html><head><title><%= title %></title><link rel='stylesheet' href='/stylesheets/style.css' /></head><body><input typ

呲溜滑_

2125人浏览 · 2022-03-12 17:10:14

呲溜滑_ · 2022-03-12 17:10:14 发布

 前端夏老师------
<!DOCTYPE html>
<html>

<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>
  <input type="file" id='input'>
  <button id="btn">按钮</button>
  <script>
    btn.addEventListener('click', upload);
    let chunk = 1024;
    let index = 0;
    function upload() {
      // 拿到当前的文件
      let file = input.files[0];
      // 每次的起始位置
      let start = chunk * index;
      // 因为文件是继承bold的二进制大对象所以当前就有size
      if (start > file.size) return;
      //获取文件名称
      let [name, ext] = file.name.split('.');

      //每次分片的大小
      let bold = file.slice(start, start + chunk);

      const formData = new FormData();

      //得到文件名称,index的目的是分片不重复
      let boldName = `${name}${index}.${ext}`;

      //需要在转换为文件对象
      let boldFile = new File([bold], boldName);

      formData.append('file', boldFile);

      fetch('/upload', {
        method: 'POST',
        body: formData
      }).then((res) => {
        index++;
        upload();
      })
    }
  </script>
</body>

</html>