前端对文件进行分片

最新推荐文章于 2024-09-05 00:15:08 发布

呲溜滑_

最新推荐文章于 2024-09-05 00:15:08 发布

阅读量2.1k

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_45932463/article/details/123446766

版权

 前端夏老师------
<!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>