# react-parallel-upload

**Repository Path**: chen-2017/react-parallel-upload

## Basic Information

- **Project Name**: react-parallel-upload
- **Description**: react 分片上传项目UI
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-02
- **Last Updated**: 2025-07-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 分片上传工具

一个现代化的前端分片上传工具，对接您提供的Java后端API，实现大文件的分片上传功能。

## 功能特性

### 🚀 核心功能
- **分片上传**: 自动将大文件分割成小块进行上传，提高上传成功率
- **断点续传**: 支持上传失败后重试，避免重复上传已成功的分片
- **并发控制**: 可配置最大并发上传数，平衡速度和服务器压力
- **进度监控**: 实时显示上传进度，包括分片进度和整体进度
- **状态管理**: 完整的任务状态管理（等待、上传中、完成、失败、取消）

### 🎨 用户界面
- **现代化设计**: 采用渐变背景和卡片式布局，视觉效果优雅
- **响应式布局**: 支持桌面和移动设备，自适应不同屏幕尺寸
- **拖拽上传**: 支持文件拖拽到上传区域
- **多文件支持**: 可同时选择和上传多个文件
- **实时统计**: 显示任务总数、等待中、上传中、已完成、失败等统计信息

### ⚙️ 配置选项
- **API地址**: 可配置后端服务地址
- **分片大小**: 支持1MB、2MB、5MB、10MB等选项
- **并发数**: 可设置1-5个并发上传任务
- **项目信息**: 可配置项目ID和用户ID

## 技术架构

### 前端技术栈
- **HTML5**: 语义化标签和现代Web API
- **CSS3**: Flexbox、Grid布局，CSS动画和过渡效果
- **JavaScript ES6+**: 模块化编程，Promise/async-await异步处理
- **Font Awesome**: 图标库

### 核心类设计
1. **ChunkUploader**: 分片上传核心类
   - 文件分片计算
   - 单个分片上传
   - 重试机制
   - 状态查询
   - 文件合并等待

2. **UploadManager**: 上传任务管理器
   - 多文件队列管理
   - 并发控制
   - 任务状态跟踪
   - 事件回调处理

3. **App**: 主应用类
   - UI交互处理
   - 设置管理
   - 通知系统
   - 数据持久化

## API对接说明

本项目完全对接您提供的Java后端API：

### 上传接口
```
POST /api/notebook/environment/upload
Headers:
  - fileId: 文件唯一标识
  - fileName: 文件名
  - chunkNumber: 分片序号
  - totalChunks: 总分片数
Body: multipart/form-data
  - file: 分片文件
  - projectId: 项目ID
  - userId: 用户ID
  - fileSize: 文件大小
  - mimeType: 文件类型
```

### 状态查询接口
```
GET /api/notebook/environment/upload/status/{fileId}
Response: {
  "fileId": "文件ID",
  "fileName": "文件名",
  "status": "上传状态",
  "totalChunks": 总分片数,
  "uploadedChunks": 已上传分片数,
  "progress": 进度百分比
}
```

## 快速开始

### 1. 下载项目
将项目文件下载到本地目录：
- `index.html` - 主页面
- `styles.css` - 样式文件
- `chunk-uploader.js` - 分片上传核心
- `upload-manager.js` - 上传管理器
- `app.js` - 主应用逻辑

### 2. 配置后端地址
1. 打开 `index.html` 文件
2. 点击右上角"设置"按钮
3. 修改"API地址"为您的后端服务地址
4. 根据需要调整其他配置项
5. 点击"保存设置"

### 3. 启动使用
1. 直接在浏览器中打开 `index.html` 文件
2. 或者使用本地Web服务器（推荐）：
   ```bash
   # 使用Python
   python -m http.server 8000
   
   # 使用Node.js
   npx serve .
   
   # 使用PHP
   php -S localhost:8000
   ```
3. 在浏览器中访问 `http://localhost:8000`

### 4. 上传文件
1. 点击"选择文件"按钮或直接拖拽文件到上传区域
2. 选择要上传的文件（支持多选）
3. 系统自动开始分片上传
4. 在任务列表中查看上传进度
5. 上传完成后可在统计信息中查看结果

## 使用说明

### 文件上传
- **选择文件**: 点击"选择文件"按钮或拖拽文件到上传区域
- **多文件上传**: 支持同时选择多个文件进行上传
- **文件限制**: 默认最大单文件100MB，可根据需要调整

### 任务管理
- **查看进度**: 每个任务显示实时上传进度和分片信息
- **取消上传**: 可以取消等待中或上传中的任务
- **重试失败**: 失败的任务可以点击"重试"按钮重新上传
- **清理任务**: 使用"清除已完成"按钮清理已完成的任务

### 批量操作
- **暂停全部**: 暂停所有等待中的上传任务
- **恢复全部**: 恢复所有暂停的上传任务
- **清除已完成**: 批量清除已完成和已取消的任务

### 设置配置
- **API地址**: 后端服务的完整URL地址
- **分片大小**: 根据网络环境选择合适的分片大小
- **最大并发数**: 控制同时上传的任务数量
- **项目ID**: 对应后端的项目标识
- **用户ID**: 对应后端的用户标识

## 故障排除

### 常见问题

1. **上传失败**
   - 检查网络连接
   - 确认后端服务是否正常运行
   - 检查API地址配置是否正确
   - 查看浏览器控制台错误信息

2. **跨域问题**
   - 确保后端服务支持CORS
   - 或者使用同域名部署前后端

3. **文件过大**
   - 检查后端文件大小限制
   - 调整分片大小设置
   - 确认服务器磁盘空间充足

4. **上传速度慢**
   - 减少并发上传数
   - 增大分片大小
   - 检查网络带宽

### 调试方法
1. 打开浏览器开发者工具（F12）
2. 查看Console标签页的错误信息
3. 查看Network标签页的网络请求
4. 检查后端服务日志

## 项目结构

```
chunk-upload-project/
├── index.html              # 主页面
├── styles.css              # 样式文件
├── chunk-uploader.js       # 分片上传核心类
├── upload-manager.js       # 上传管理器类
├── app.js                  # 主应用逻辑
└── README.md              # 项目说明文档
```

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 开发说明

### 扩展功能
如需添加新功能，可以：
1. 在相应的类中添加新方法
2. 在UI中添加对应的交互元素
3. 在app.js中绑定事件处理

### 样式定制
可以修改 `styles.css` 文件来定制界面样式：
- 修改CSS变量来改变主题色彩
- 调整布局参数来适配不同需求
- 添加新的动画效果

### API扩展
如需对接其他后端API，可以：
1. 修改ChunkUploader类中的API调用方法
2. 调整请求参数和响应处理逻辑
3. 更新设置面板中的配置项

## 许可证

本项目仅供学习和参考使用。

## 联系方式

如有问题或建议，请通过以下方式联系：
- 项目地址: https://gitee.com/chen-2017/react-parallel-upload
- 邮箱: nutschen0303@gmail.com

---

**注意**: 使用前请确保后端服务正常运行，并根据实际情况调整配置参数。