Skip to content

Latest commit

 

History

History
42 lines (29 loc) · 2.9 KB

README.md

File metadata and controls

42 lines (29 loc) · 2.9 KB

NgQuickStart

** NgQuickStart 是一个angulra2+的文件秒传+队列上传+切片上传+断点续传的开源库**

目前暂时实现angular版本,2.0版本的预期是将核心逻辑封装起来做一个vue版本

目前是0.9试用版本

期望的1.0版本是对整个流程走通的情况下,demo部署服务器,代码规范 注释完善。 期望的2.0版本增加自定义上传字段,后端以字段匹配文件夹存储文件和很多自定义功能,以及发布npm包 核心代码是前端部分,因为要做demo的原因故而将服务端也开发完成 本例的服务端采用nodejs 使用koa2作为后端框架

所需环境

Angular : 8.0 + nodejs : 10.14 + koa : 2.0 +

架构思路

大文件上传有很多思路,前后端文件上传也有几种方法,在这里我就不一一列举。

一. 队列上传
  1. 大多数情况下,尤其是在PC端因为流量相对较大 所以做并发上传较快,但是在移动设备就不是那么很友好,比如有十个切片一起通过Promise.all()并发后会造成暂时性占流的影响,走其他业务接口就会阻塞,导致不友好的用户体验,故而采用队列的方式对上传数据做一个时间序列上的把控。
二. 切片上传
  1. 本例在前后端的配置文件里有个是CHUNK_SIZE的属性控制其切片的大小,前端选择文件后与CHUNK_SIZE对比,如果小于CHUNK_SIZE则不去切片,否则反之。
  2. 切片的核心内容就是Blob.slice(); Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。Dom实现了文件接口FIle类继承自Blob类。
  3. Blob.slice() 方法用于创建一个包含源 Blob的指定字节范围内的数据的新 Blob 对象。
  4. 服务端接收切片将切片存入,等切片上传完成在进行合并操作
三. 文件秒传+断点续传
  1. 当切片上传完成后,如果出现网络问题或者其他人为因素导致中断后,下次在选择此文件的时候即直接进行合并操作,避免重复上传切片。
  2. 每次上传大文件的时候都会将文件的hash值作为参数传入服务端,服务端以此hash匹配切片,将已经传入的切片返回至客户端。
四. 文件Hash值
  1. 哈希值(hash values)是使用哈希函数(hash function)计算得到的值。哈希函数是是一种从任何一种数据中创建小的数字“指纹”的方法。散列函数把消息或数据压缩成摘要,使得数据量变小,将数据的格式固定下来。就是根据数据内容计算得到相应的"摘要",根据这个摘要可以区分该数据与其他数据。
  2. 因为考虑到计算hash是一个耗时且不用调用Dom Api的操作,故而将计算hash的操作作为WebWorker的方式进行,从而解决页面阻塞的情况。

前端架构

End