Skip to content

【前端】大文件上传解决方案,切片,断点续传,秒传,失败自动重传

License

Notifications You must be signed in to change notification settings

shenmaxg/file-upload-react

Repository files navigation

file-upload-react

【前端】大文件上传解决方案,切片,断点续传,秒传,失败自动重试。

特性

  1. 大文件切片上传。
  2. 重复文件秒传。
  3. 断点续传。
  4. 控制请求并发数。
  5. 显示每个切片的上传进度。
  6. 切片上传失败自动重试。

启动

npm install --> npm start

该项目还需要 file-upload-server 项目的配合。请启动 server 后再进行后续操作。

切片上传

我们创建一个 500M 的文件,切片大小为 10M。由于 chrome 浏览器并发数量有限,我们限制最大并发为 6,进行切片文件的上传。演示如下。

preview

秒传

还是之前的文件,由于已经上传成功,第二次上传的时候触发秒传。

second

断点续传

上传停止后,可以从断点处重新开始上传。

point

失败自动重试

后台设置首次上传失效,可以看到,切片上传失败后自动重试。

retry

注意事项

由于是前后端分离的应用,是存在跨域问题的,前端的端口修改后,记得将后端的 cors 设置改掉,否则后报跨域错误。

相关阅读

如何做大文件上传

About

【前端】大文件上传解决方案,切片,断点续传,秒传,失败自动重传

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published