大文件上传方案


大文件上传实现方案

关于上传

其实Element-ui已经封装了一个自己上传的组件了,只是这个组件没有暂停,继续的功能。也就是说没有分片,没有断点续传的功能。

数管的项目根据UI图来看是需要实现断点续传这个功能的,于是在网络上搜索了相关资料。找到了webuploader,但是这个在14年之后就没有更新过了。然后又找到了基于vue和simple-uploader.js封装的一个上传组件:vue-simple-uploader(会另写一篇vue-simple-uploader的文章)

关于切片上传 / 断点续传

切片上传/断点续传的存在是为了实现 大文件上传。有时候因为网络的不稳定,用户关闭页面等影响,如果文件没有在下载完成的中途出现了问题,就会下载失败

文件切片

切片,顾名思义就是把要上传的大文件,按照配置的每个切片的大小分成若干份的 “片”,上传整个大文件的过程转变成了上传若干个 “片” 的过程,如果出现网络问题导致上传失败,虽然整个文件没有成功,但是有一些切片已经成功下载,用户在下一次下载的时候可以从没有的切片开始下载,而下载过的切片就不需要重新下载了。

文件的切片由前端完成,每一切片的传输都会调用一次上传的接口,当所有切片都上传完成,再调用一次makefille接口(自己协商的接口名称),通知后端还原切片

还原切片

为了还原切片,前端会在每个切片上附加其context信息,

  1. 当前切片index,以及切片总数,切片index从0开始
  2. MD5 hash校验

后端找到同一个context下的所有切片,确认每个切片顺序,拼接切片

不同名 但 同hash相同文件 可以直接指针指向,前端将状态标为完成(待定)

断点续传

当网络故障或用户关闭网页等,需要断点续传。

需要后端维护文件列表及上传进度。

当接收到某个文件makefile请求后表示所有切片传输完毕。

当用户需要续传时,

  • 如果 没有关闭tab或者 没有关闭浏览器 或者网断的情况下,不需要额外操作可以正常续传文件。
  • 如果关闭tab或浏览器,传输列表依然在,续传需要用户再次选择完全相同的文件,但是已经上传过的切片不用重复上传。
  • 选择不同的文件前端需要校验并提示

针对关闭浏览器,关闭tab和断网的情况

  • 关闭浏览器,前端无法捕捉事件,需要后端自行调研判断,百度了一下有相关帖子
  • 关闭tab,前端可以捕捉事件,并通知后端。
  • 网络断开,前端无法捕捉,需要后端判断 。

可能还要考虑切片保存期限的问题。(待定)


文章作者: Silong Xu
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Silong Xu !
 上一篇
vue项目创建之后的配置 vue项目创建之后的配置
vue项目创建之后的配置 在使用vue cli创建了vue项目并且进行了git代码管理之后,我们已经可以进行本地开发,进行静态页面的开发了。但是一个项目肯定不会只有静态页面(除非只是为了展示),我们还需要和后端进行数据交互,也就是接口以及字
2020-09-27
下一篇 
axios封装http请求 axios封装http请求
vue使用axios封装http请求 安装axios npm命令: npm install axios --save 找一个合适的目录位置 建立一个http.js 在其中导入axios import axios from 'axios';
2020-09-27
  目录