React与Egg.js如何编写断点续传功能的示例代码？

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

技术栈+前端使用了React，后端则采用了Egg.js，均采用TypeScript编写。+ 断点续传实现原理+断点续传就是在上传一个文件的时候，如果上传中断了，可以暂停上传，然后从上次暂停的地方继续上传，而不需要重新上传整个文件。

技术栈

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

断点续传实现原理

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

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

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

前端实现

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

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

这里把文件块放入一个fileChunkList数组，方便后面去获取文件的MD5值、上传文件块等。