断点续传
断点续传的原理在于前端/服务端需要记住已上传的切片,这样下次上传就可以跳过之前已上传的部分,有两种方案实现记忆的功能
- 前端使用 localStorage 记录已上传的切片 hash
- 服务端保存已上传的切片 hash,前端每次上传前向服务端获取已上传的切片
第一种是前端的解决方案,第二种是服务端,而前端方案有一个缺陷,如果换了个浏览器就失去了记忆的效果,所以这里选后者
为什么使用断点续传
- 1、防止网络异常,当需要上传大文件时,网络环境可能不稳定,上传过程中可能会出现网络中断或上传失败的情况。如果没有断点续传机制,用户需要重新上传整个文件,耗费时间和浪费带宽资源。
- 2、用户体验:断点续传可以提供更好的用户体验。用户可以在上传过程中暂停、恢复或取消上传操作,而不必从头开始上传,节省时间和精力。
文件秒传
所谓的文件秒传,即在服务端已经存在了上传的资源,所以当用户 再次上传时会直接提示上传成功
文件秒传需要依赖上一步生成的 hash,即在 上传前,先计算出文件 hash,并把 hash 发送给服务端进行验证,由于 hash 的唯一性,所以一旦服务端能找到 hash 相同的文件,则直接返回上传成功的信息即可
暂停上传
断点续传顾名思义即断点 + 续传,所以我们第一步先实现“断点”,也就是暂停上传
- 原理是使用 XMLHttpRequest 的
abort方法,可以取消一个 xhr 请求的发送
实现步骤:
- 在request请求中,保存xhr对象
- 在上传切片时,把所有上传切片的请求xhr保存到数组中
- 每当一个切片上传成功时,将对应的 xhr 从数组中删除
- 创建一个按钮,点击这个按钮的时候,调用xhr的abort方法 ,取消并清空所有正在上传的切片
恢复上传 【续传】
- 由于当文件切片上传后,服务端会建立一个文件夹存储所有上传的切片,所以每次前端上传前可以调用一个接口
- 服务端将已上传的切片的切片名返回,前端再跳过这些已经上传切片,这样就实现了“续传”的效果