什么是 ChunkFlow？

ChunkFlow 是一个通用的大文件上传解决方案，提供完整的、生产就绪的 SDK 来处理任意大小的文件上传。它采用分层架构设计，使其高度灵活、高性能且易于集成到任何项目中。

问题

在 Web 上上传大文件具有挑战性：

网络不稳定：长时间上传可能因网络中断而失败
内存限制：将整个文件加载到内存中可能导致浏览器崩溃
用户体验差：用户无法看到上传进度或暂停/恢复
重复上传：相同文件多次上传浪费带宽和存储空间
性能问题：一刀切的方法无法适应不同的网络条件

解决方案

ChunkFlow 通过一套全面的功能解决这些问题：

🚀 智能上传策略

根据文件大小自动选择最优上传策略：

文件 < 5MB：直传以提高速度
文件 ≥ 5MB：分片上传以提高可靠性

📦 动态分片

根据网络条件调整分片大小，类似 TCP 慢启动：

快速网络 → 更大的分片（最大 10MB）
慢速网络 → 更小的分片（最小 256KB）
同时优化速度和可靠性

⚡ 秒传（去重）

基于 Hash 的去重实现秒传：

完全秒传：文件已存在 → 跳过整个上传
部分秒传：部分分片存在 → 只上传缺失的分片
节省带宽和时间

🔄 断点续传

从中断处继续：

进度持久化到 IndexedDB
页面重新加载时自动恢复
手动暂停/恢复控制

🎯 框架无关

适用于任何框架或原生 JavaScript：

React Hooks 和组件
Vue Composables 和组件
框架无关的核心层

🛠️ 高度可扩展

用于自定义功能的插件系统：

日志记录
分析
自定义验证
进度跟踪
更多...

架构

ChunkFlow 使用分层架构，每一层都有特定的职责：

┌─────────────────────────────────────┐
│     组件层                          │  开箱即用的 UI 组件
│  (React/Vue 组件)                   │
├─────────────────────────────────────┤
│     客户端层                        │  框架适配器
│  (React Hooks / Vue Composables)   │
├─────────────────────────────────────┤
│     核心层                          │  上传逻辑和状态机
│  (UploadManager, UploadTask)       │
├─────────────────────────────────────┤
│     共享层                          │  通用工具
│  (事件、并发、文件工具)             │
├─────────────────────────────────────┤
│     协议层                          │  类型定义和接口
│  (TypeScript 类型)                 │
└─────────────────────────────────────┘

每一层都是独立的，可以单独使用，为你提供最大的灵活性。

主要特性

并行 Hash 计算

Hash 计算和上传同时进行：

不等待 hash 完成就开始上传
如果文件已存在则取消正在进行的上传
优先上传前几个分片以快速获得反馈

并发控制

智能管理并行上传：

可配置的并发分片上传（默认：3）
队列管理以优化资源使用
基于性能的动态调整

错误处理和重试

强大的错误处理和自动重试：

指数退避策略
可配置的重试次数和延迟
功能不可用时优雅降级

进度跟踪

实时进度信息：

上传百分比
上传速度（字节/秒）
预计剩余时间
每个分片的进度

生命周期事件

用于自定义逻辑的完整事件系统：

onStart：上传开始
onProgress：进度更新
onSuccess：上传完成
onError：发生错误
onPause：上传暂停
onResume：上传恢复
onCancel：上传取消

使用场景

ChunkFlow 非常适合：

媒体平台：视频和图片上传平台
云存储：文件存储和备份服务
内容管理：支持大文件的 CMS
在线教育：课程资料和视频上传
企业应用：文档管理系统
任何应用：需要可靠的大文件上传

什么是 ChunkFlow？ ​

问题 ​

解决方案 ​

🚀 智能上传策略 ​

📦 动态分片 ​

⚡ 秒传（去重） ​

🔄 断点续传 ​

🎯 框架无关 ​

🛠️ 高度可扩展 ​

架构 ​

主要特性 ​

并行 Hash 计算 ​

并发控制 ​

错误处理和重试 ​

进度跟踪 ​

生命周期事件 ​

使用场景 ​

下一步 ​