原生JS实现大文件分片

为了实现断点续传，研究了js的文件分片

实现断点续传的步骤

文件分片按顺序上传，上传第一个后文件名md5加密保存到rdis的key，value保存为上传的index，

然后下面每次上传成功就更新对应的value，保持最新的

第一次上传时，查询redis是否已经存在相同的key，如果相同就跳到保存的index的下一个上传

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script>
  const 切片大小 = (1024 * 1024) * 1; // 确定分片大小
  const xmt = new XMLHttpRequest(); // ajax请求
  function update(index) {
      
       // index是上传标记的序列
    const file = document.getElementById("文件").files[0]; // 获取文件
    const {
      
       fname, fext} = file.name.split('.'); // 获取文件的名字和拓展名
    const star=index * 切片大小; // 切片的起点
    // 判断起点是否已经超过文件的长度，超过说明已经
    if (star > file.size) {
      
      
      return;
    }

    const bool = file.slice(star,star+切片大小); // slice（分割起点，分割终点）是js切割文件的函数，
    const boolname = fname + index + fext
    const boolfile = new File([bool],boolname) // 把分割后的快转成文件传输
    const from = new FormData();//定义集合方便后端接收

    from.append("切片序列", index);
    from.append("切片长度", 切片大小);
    from.append("name",file.name)
    from.append("file",boolfile);
    from.append("name",file.name)
    from.append("file",boolfile);
    xmt.open("post","/接收文件",true)//发送请求
    xmt.send(from)//携带集合
    xmt.onreadystatechange = function() {
      
      
      if (this.readyState === 4 && this.status === 200) {
      
      
        //alert(this.responseText)
        if ( this.responseText === "上传完成"){
      
      //按顺序上传，只有上一片上传成功下一个才能上传
          //这里可以加个判断，获取断点，获取后下一个，后端也会判断切片是否已经下载过
          update(++index);
          document.getElementById("显示").value = star / file.size;//显示上传的进度
        }
      }
    };
  }
</script>
<body>
<div>
  <!-- 获取文件 -->
  <input type="file" name="选择文件" id="文件">
  <!-- 点击执行 -->
  <input type="button" value="确定" onclick="update(0)">
  <br>
  <input type="text" id="显示" />
</div>
</body>
</html>

原生JS实现大文件分片

实现断点续传的步骤

猜你喜欢