# breakpoint-transfer-launcher-page

**Repository Path**: breakpoint-transfer-launcher/breakpoint-transfer-launcher-page

## Basic Information

- **Project Name**: breakpoint-transfer-launcher-page
- **Description**: 断点续传启动器 -- 前端演示页面
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-10
- **Last Updated**: 2026-02-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Breakpoint Transfer Launcher Page

## 中文

### 项目介绍

这是一个基于 Vue 3 + TypeScript + Vite 的大文件断点续传演示项目。该项目实现了大文件上传的核心功能，包括断点续传、暂停/恢复、上传进度显示、网速计算、剩余时间估算等。

### 核心功能

1. **断点续传**：支持在大文件上传过程中中断后继续上传，无需重新上传整个文件
2. **暂停/恢复**：支持暂停上传任务，并在之后恢复上传
3. **分片上传**：将大文件分割成多个小片段进行上传，提高上传效率和可靠性
4. **进度显示**：实时显示上传进度、已上传大小、文件大小
5. **网速计算**：实时计算并显示上传速度
6. **剩余时间估算**：根据上传速度估算剩余完成时间
7. **文件验证**：支持验证已上传的文件片段，避免重复上传
8. **文件合并**：上传完成后自动合并所有分片

### 技术栈

- **前端框架**：Vue 3 (Composition API)
- **构建工具**：Vite 5
- **UI 组件库**：Ant Design Vue 4
- **路由**：Vue Router 4
- **状态管理**：原生 Vue Ref/Reactive
- **样式**：Less + CSS
- **工具库**：
  - upload-file-jdk：核心上传功能
  - jsmethod-extra：常用工具方法
  - uuid：生成唯一标识
  - localforage：本地存储
  - i18next：国际化支持

### 项目结构

```
src/
├── api/                    # API 接口定义
│   ├── request/            # 请求封装
│   └── upload/             # 上传相关接口
├── assets/                 # 静态资源
├── hooks/                  # Vue Composition API hooks
├── router/                 # 路由配置
├── utils/                  # 工具函数
├── views/                  # 页面组件
│   └── Test/               # 测试页面（大文件上传演示）
├── App.vue                 # 根组件
├── main.ts                 # 应用入口
└── style.css               # 全局样式
```

### 环境要求

- Node.js >= 18
- pnpm (推荐) 或 npm

### 快速开始

1. **安装依赖**

```bash
pnpm install
```

2. **启动开发服务器**

```bash
pnpm dev
```

3. **构建生产版本**

```bash
pnpm build
```

4. **预览生产版本**

```bash
pnpm preview
```

### 配置说明

#### Vite 配置

项目使用 Vite 进行构建，默认配置如下：

- 开发服务器端口：9222
- 基础路径：`/factory`
- API 代理：`/api` -> `http://localhost:8080`

#### 上传配置

上传功能通过 `uploadHandler.config()` 进行配置，主要配置项包括：

- `persist`：是否持久化上传状态
- `req`：上传相关的 API 请求函数
  - `listFilesReq`：获取已上传文件列表
  - `sectionUploadReq`：分片上传请求
  - `mergeUploadReq`：合并文件请求
  - `verifyFileExistReq`：验证文件是否存在

### API 接口

项目需要配合后端服务使用，以下是预期的 API 接口：

| 接口     | 方法 | 路径                                                       | 说明                 |
| -------- | ---- | ---------------------------------------------------------- | -------------------- |
| 分片上传 | POST | `/breakpoint/transfer/upload/section/{baseDir}/{fileName}` | 上传文件分片         |
| 合并文件 | GET  | `/breakpoint/transfer/upload/merge/{baseDir}/{fileName}`   | 合并所有分片         |
| 验证文件 | GET  | `/breakpoint/transfer/upload/verify/{fileName}`            | 验证文件是否已存在   |
| 文件列表 | GET  | `/breakpoint/transfer/upload/list/{baseDir}`               | 获取已上传的文件列表 |

### 使用说明

1. 点击上传区域或拖拽文件到指定区域
2. 系统会自动将文件分片并开始上传
3. 可以点击暂停按钮暂停上传
4. 可以点击关闭按钮取消上传
5. 上传完成后会自动合并文件分片

### 上传状态说明

| 状态             | 说明       |
| ---------------- | ---------- |
| Uploading        | 上传中     |
| Pause            | 已暂停     |
| PauseRetry       | 暂停重试中 |
| BreakPointUpload | 断点续传中 |
| Merge            | 合并中     |
| Done             | 完成       |
| Canceled         | 已取消     |
| QuickUpload      | 快速上传   |
| RefreshRetry     | 刷新重试中 |
| RequestError     | 请求错误   |
| RetryFailed      | 重试失败   |

---

## License

MIT