Upload Client WASM Library

高性能文件上传 WASM 库，支持分片上传、断点续传、秒传等功能。

特性

• 🚀 WASM 加速: 使用 Rust + WebAssembly 实现核心算法
• 📦 分片上传: 支持大文件分片上传，可配置分片大小
• ⚡ 秒传功能: 文件哈希计算 + 服务端检测，秒级完成
• 🔄 断点续传: 支持网络中断后继续上传
• 📊 批量上传: 支持多文件并发上传，智能队列管理
• 🎯 进度追踪: 实时上传进度、速度、剩余时间
• 🔧 Web Worker: 后台处理，不阻塞 UI 线程
• 💪 TypeScript: 完整类型定义
• ⚛️ React 集成: 开箱即用的 React Hooks

架构

wasm/
├── rust/                  # Rust WASM 核心库
│   ├── src/
│   │   ├── lib.rs        # WASM 入口
│   │   ├── hasher.rs     # 文件哈希计算
│   │   └── chunker.rs    # 分片逻辑
│   └── Cargo.toml
├── worker/               # Web Worker
│   └── upload.worker.ts  # 上传管理器
├── sdk/                  # TypeScript SDK
│   ├── core/
│   │   ├── UploadClient.ts      # 客户端核心
│   │   ├── UploadTask.ts        # 上传任务
│   │   └── StateManager.ts      # 状态管理
│   ├── api/
│   │   └── client.ts            # API 封装
│   └── types/
│       └── index.ts             # 类型定义
├── hooks/                # React Hooks
│   ├── useUpload.ts      # 单文件上传
│   └── useUploadQueue.ts # 批量上传队列
├── examples/             # 示例代码
└── package.json

快速开始

安装

cd froentend/wasm
npm install

构建 WASM

# 安装 Rust 工具链
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
rustup target add wasm32-unknown-unknown
cargo install wasm-pack

# 构建 WASM
npm run build:wasm

使用

import { useUpload } from '@/wasm/hooks/useUpload';

function UploadDemo() {
  const {
    upload,
    progress,
    status,
    cancel
  } = useUpload({
    baseURL: 'https://upload.example.com',
    token: 'your-jwt-token',
    onSuccess: (result) => {
      console.log('上传成功:', result);
    }
  });

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    upload(file);
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <div>进度: {progress}%</div>
      <div>状态: {status}</div>
      <button onClick={cancel}>取消</button>
    </div>
  );
}

API 参考

详见 API 文档

性能

• WASM 哈希计算速度：~800MB/s（SHA256）
• 分片上传吞吐量：~100MB/s（取决于网络）
• 内存占用：< 10MB（不含文件缓存）
• 并发上传：支持最多 100 个任务

许可

MIT License