如何用React EggJs实现支持长尾词的断点续传功能？

本文共计1896个文字，预计阅读时间需要8分钟。

技术栈+前端使用了React，后端使用了Egg.js，都使用了TypeScript编写。+ 断点续传实现原理+断点续传即在传输一个文件的时候，如果因为网络或其他原因中断，可以在下次连接时从上次中断的地方继续传输，而不需要重新传输整个文件。具体来说，断点续传实现时，上传的文件会被分成多个小块，每次上传一小块。如果在传输过程中断，下次上传时只需要上传未完成的小块，而不是整个文件。

技术栈

前端用了React，后端则是EggJs，都用了TypeScript编写。

断点续传实现原理

断点续传就是在上传一个文件的时候可以暂停掉上传中的文件，然后恢复上传时不需要重新上传整个文件。

该功能实现流程是先把上传的文件进行切割，然后把切割之后的文件块发送到服务端，发送完毕之后通知服务端组合文件块。

其中暂停上传功能就是前端取消掉文件块的上传请求，恢复上传则是把未上传的文件块重新上传。需要前后端配合完成。

前端实现

前端主要分为：切割文件、获取文件MD5值、上传切割后的文件块、合并文件、暂停和恢复上传等功能。

切割文件：这个功能点在整个断点续传中属于比较重要的一环，这里仔细说明下。我们用ajax上传一个大文件用的时间会比较长，在上传途中如果取消掉请求，那在下一次上传时又要重新上传整个文件。而通过把大文件分解成若干个文件块去上传，这样在上传中取消请求，已经上传的文件块会保存到服务端，下一次上传就只需要上传其他没上传成功的文件块(不用传整个文件)。