在React中使用WebUploader实现大文件分片上传的踩坑日记!

时间:2024-01-18 19:17:14

前段时间公司项目有个大文件分片上传的需求,项目是用React写的,大文件分片上传这个功能使用了WebUploader这个组件。

具体交互是:

1. 点击上传文件button后出现弹窗,弹窗内有选择文件和开始上传button。

2. 每个文件显示序号、文件名、进度条、上传操作按钮(开始/暂停、删除)。

3. 选择好文件之后点击开始上传,文件按照顺序自动从第一个开始上传。

4. 期间如果用户点了弹窗“X”关闭,则暂停任务,弹窗关闭。

5. 弹窗关闭之后重新点击上传文件button后将用户上次选择的未完成的文件展示出来,并可以继续上传。

6. 全部上传完成之后自动关闭弹窗。

在React中使用WebUploader实现大文件分片上传的踩坑日记!

开发过程中踩了不少坑,好在自己始终没有放弃,慢慢研究探索,终于是实现了需求,或许这就叫做匠人精神吧