前端大文件上传(秒传,切片,断点续传)

491 阅读2分钟

在做文件导入的时候,导入文件过大,可能会导致时间过长,且失败后,整个文件需要重新上传,我们需要前后端结合的方式解决这个问题

首先先了解一下,原来在没有做大文件处理的时候是怎么实现上传的

  • 不考虑文件大小 -> 调用post接口 -> formData携带file对象或者Blob对象
  • 问题:一旦文件过大,可能传输失败,失败后需要重新上传
  • 假如文件传过,就需要重新上传,用什么判断呢

我们要做的事情

  • 对文件进行切片 将一个请求分成多个请求,每个请求的时间就会缩短,且某个请求中断,只需要重新发一个这个请求就可以,无需从头开始
  • 通知服务器合并切片 上传完切片后,前端通知服务器,合并切片
  • 控制多个请求并发量 防止多个请求同时发出,造成浏览器内存溢出,导致页面卡死
  • 做断点续传 当多个请求有请求发送失败,如网络中断,关闭页面等,我们需要对失败的请求做处理,可以继续上传

后端接口

后端需要提供3个接口

  1. 检查接口 -- 接受参数--文件的hash值
    • 文件已经传过,告诉客户端不需要再传了,秒传成功
    • 文件传了一部分,告诉客户端需要继续传,并告知从第几个分片开始传
    • 还未传过
  2. 上传文件接口 --接收参数-- fromData类型的file和filename等其他
    • 接收分片文件,保存到临时目录
  3. 合并分片接口--接收参数--文件的hash值
    • 合并分片,并告知前端分片合并成功

``