大文件上传实现方案
关于上传
其实Element-ui已经封装了一个自己上传的组件了,只是这个组件没有暂停,继续的功能。也就是说没有分片,没有断点续传的功能。
数管的项目根据UI图来看是需要实现断点续传这个功能的,于是在网络上搜索了相关资料。找到了webuploader,但是这个在14年之后就没有更新过了。然后又找到了基于vue和simple-uploader.js封装的一个上传组件:vue-simple-uploader(会另写一篇vue-simple-uploader的文章)
关于切片上传 / 断点续传
切片上传/断点续传的存在是为了实现 大文件上传。有时候因为网络的不稳定,用户关闭页面等影响,如果文件没有在下载完成的中途出现了问题,就会下载失败
文件切片
切片,顾名思义就是把要上传的大文件,按照配置的每个切片的大小分成若干份的 “片”,上传整个大文件的过程转变成了上传若干个 “片” 的过程,如果出现网络问题导致上传失败,虽然整个文件没有成功,但是有一些切片已经成功下载,用户在下一次下载的时候可以从没有的切片开始下载,而下载过的切片就不需要重新下载了。
文件的切片由前端完成,每一切片的传输都会调用一次上传的接口,当所有切片都上传完成,再调用一次makefille接口(自己协商的接口名称),通知后端还原切片
还原切片
为了还原切片,前端会在每个切片上附加其context信息,
- 当前切片index,以及切片总数,切片index从0开始
- MD5 hash校验
后端找到同一个context下的所有切片,确认每个切片顺序,拼接切片
不同名 但 同hash相同文件 可以直接指针指向,前端将状态标为完成(待定)
断点续传
当网络故障或用户关闭网页等,需要断点续传。
需要后端维护文件列表及上传进度。
当接收到某个文件makefile请求后表示所有切片传输完毕。
当用户需要续传时,
- 如果 没有关闭tab或者 没有关闭浏览器 或者网断的情况下,不需要额外操作可以正常续传文件。
- 如果关闭tab或浏览器,传输列表依然在,续传需要用户再次选择完全相同的文件,但是已经上传过的切片不用重复上传。
- 选择不同的文件前端需要校验并提示
针对关闭浏览器,关闭tab和断网的情况
- 关闭浏览器,前端无法捕捉事件,需要后端自行调研判断,百度了一下有相关帖子
- 关闭tab,前端可以捕捉事件,并通知后端。
- 网络断开,前端无法捕捉,需要后端判断 。
可能还要考虑切片保存期限的问题。(待定)