🚀
智能上传策略
根据文件大小自动选择直传或分片上传，获得最佳性能
ChunkFlow文件上传 SDK
通用的大文件上传解决方案，支持分片上传、断点续传和秒传功能
Skip to content
快速开始
bash
pnpm add @chunkflowjs/core @chunkflowjs/upload-client-reactbash
npm install @chunkflowjs/core @chunkflowjs/upload-client-reactbash
yarn add @chunkflowjs/core @chunkflowjs/upload-client-reactReact 示例
tsx
import { UploadProvider } from "@chunkflowjs/upload-client-react";
import { UploadButton, UploadList } from "@chunkflowjs/upload-component-react";
import { createFetchAdapter } from "@chunkflowjs/core";
const adapter = createFetchAdapter({
baseURL: "http://localhost:3000/api",
});
function App() {
return (
<UploadProvider requestAdapter={adapter}>
<UploadButton accept="image/*,video/*" maxSize={100 * 1024 * 1024}>
选择文件
</UploadButton>
<UploadList />
</UploadProvider>
);
}Vue 示例
vue
<script setup>
import { createApp } from "vue";
import { UploadPlugin } from "@chunkflowjs/upload-client-vue";
import { UploadButton, UploadList } from "@chunkflowjs/upload-component-vue";
import { createFetchAdapter } from "@chunkflowjs/core";
const adapter = createFetchAdapter({
baseURL: "http://localhost:3000/api",
});
const app = createApp(App);
app.use(UploadPlugin, { requestAdapter: adapter });
</script>
<template>
<UploadButton accept="image/*,video/*" :max-size="100 * 1024 * 1024"> 选择文件 </UploadButton>
<UploadList />
</template>为什么选择 ChunkFlow？
ChunkFlow 采用"高度解耦、渐进增强、性能优先"的设计理念：
- 高度解耦：每一层都是独立的 - 只使用你需要的部分
- 性能优先：Hash 计算和上传并行执行、动态分片、并发控制
- 用户体验优先：秒传、断点续传、实时进度反馈
- 开发者友好：TypeScript 类型安全、完善的文档、开箱即用的组件
- 生产就绪：完整的错误处理、重试机制、测试覆盖