原生JS实现大文件分片

__畫戟__

已于 2023-03-27 17:59:22 修改

阅读量1.5k

点赞数 5

分类专栏： JavaScript 文章标签：原生JS实现大文件分片断点续传原生JS实现大文件分片 file.slice

于 2022-04-23 23:44:42 首次发布

原文链接：https://zhuanlan.zhihu.com/p/371532358

版权

JavaScript 专栏收录该内容

64 篇文章 6 订阅

订阅专栏

本文详细介绍了如何利用JavaScript实现断点续传文件功能，包括文件分片、上传过程和状态管理。通过将文件按固定大小分片，利用MD5校验和Redis存储已上传片段信息，确保上传的连续性和完整性。在上传过程中，检查Redis中是否存在相同文件的上传记录，若有则从上次断点继续，从而实现断点续传。文章还提供了相关的HTML和JavaScript代码示例，展示具体实现逻辑。

摘要由CSDN通过智能技术生成

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

实现断点续传的步骤

文件分片按顺序上传，上传第一个后文件名md5加密保存到rdis的key，value保存为上传的index，
然后下面每次上传成功就更新对应的value，保持最新的
第一次上传时，查询redis是否已经存在相同的key，如果相同就跳到保存的index的下一个上传

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div>
      <!-- 获取文件 -->
      <input type="file" name="选择文件" id="file-upload" />
      <!-- 点击执行 -->
      <input type="button" value="确定" onclick="update(0)" />
      <br />
      <input type="text" id="显示" />
    </div>

    <script>
      // 切片大小
      const chunkSize = 1024 * 1024 * 1 // 确定分片大小
      const xml = new XMLHttpRequest() // ajax请求
      function update(index) {
        // index是上传标记的序列
        const file = document.getElementById('file-upload').files[0] // 获取文件
        console.log('file', file)
        
        // 获取文件的名字和拓展名
        const lastPoint = file.name.lastIndexOf('.')
        const filename = file.name.slice(0, lastPoint)
        const ext = file.name.slice(lastPoint + 1)
        console.log('filename', filename)
        console.log('ext', ext)
        const star = index * chunkSize // 切片的起点
        // 判断起点是否已经超过文件的长度，超过说明已经
        if (star > file.size) {
          return
        }

        const bool = file.slice(star, star + chunkSize) // slice（分割起点，分割终点）是js切割文件的函数，
        console.log('bool', bool)
        const boolname = `${filename}-${index}-${ext}`
        console.log('boolname', boolname)
        const boolfile = new File([bool], boolname) // 把分割后的快转成文件传输
        console.log('boolfile', boolfile)
        const from = new FormData() //定义集合方便后端接收

        from.append('index', index)
        from.append('chunkSize', chunkSize)
        from.append('name', file.name)
        from.append('file', boolfile)
        console.log('from', from)
        xml.open('post', '/接收文件', true) // 发送请求
        xml.send(from) //携带集合
        xml.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>
</html>