# large-file-upload

**Repository Path**: xiang-ace/large-file-upload

## Basic Information

- **Project Name**: large-file-upload
- **Description**: 大文件上传
前端： vue3
后端:   node
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-05
- **Last Updated**: 2025-12-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 大文件上传项目

一个完整的大文件上传解决方案，支持分片上传、断点续传、进度显示等功能。

## 项目结构

```
big-file-upload/
├── backend/          # Node.js 后端服务
│   ├── server.js     # 服务器主文件
│   ├── package.json  # 后端依赖配置
│   └── uploads/      # 上传文件存储目录（自动创建）
│       ├── chunks/   # 分片临时存储
│       └── files/    # 合并后的完整文件
├── frontend/         # Vue 3 前端应用
│   ├── src/
│   │   ├── App.vue   # 主组件
│   │   ├── main.js   # 入口文件
│   │   ├── style.css # 全局样式
│   │   └── utils/
│   │       └── spark-md5.js  # 文件哈希计算工具
│   ├── index.html    # HTML 模板
│   ├── vite.config.js # Vite 配置
│   └── package.json  # 前端依赖配置
└── README.md         # 项目说明文档
```

## 功能特性

- ✅ **分片上传**：将大文件分割成多个小分片进行上传
- ✅ **断点续传**：支持上传中断后继续上传
- ✅ **进度显示**：实时显示上传进度和速度
- ✅ **文件哈希**：使用 SHA-256 计算文件唯一标识
- ✅ **拖拽上传**：支持拖拽文件到上传区域
- ✅ **美观界面**：现代化的 UI 设计

## 快速开始

### 1. 安装后端依赖

```bash
cd backend
npm install
```

### 2. 启动后端服务

```bash
npm start
# 或使用开发模式（自动重启）
npm run dev
```

后端服务将在 `http://localhost:3000` 启动

### 3. 安装前端依赖

```bash
cd frontend
npm install
```

### 4. 启动前端开发服务器

```bash
npm run dev
```

前端应用将在 `http://localhost:5173` 启动

## API 接口说明

### 1. 检查分片状态
```
POST /api/checkChunks
Body: { hash: string, total: number }
Response: { uploadedChunks: number[], uploadedCount: number, total: number }
```

### 2. 上传分片
```
POST /api/uploadChunk
Content-Type: multipart/form-data
Body: FormData { chunk: File, hash: string, index: number, filename: string, total: number }
Response: { success: boolean, message: string, hash: string, index: number }
```

### 3. 合并分片
```
POST /api/mergeChunks
Body: { hash: string, filename: string, total: number }
Response: { success: boolean, message: string, filename: string, size: number, path: string }
```

### 4. 获取上传进度
```
GET /api/uploadProgress/:hash?total=number
Response: { uploadedCount: number, total: number, progress: string }
```

### 5. 健康检查
```
GET /api/health
Response: { status: string, message: string }
```

## 技术栈

### 后端
- **Node.js** - JavaScript 运行时
- **Express** - Web 框架
- **Multer** - 文件上传中间件
- **fs-extra** - 文件系统操作

### 前端
- **Vue 3** - 渐进式 JavaScript 框架
- **Vite** - 前端构建工具
- **Axios** - HTTP 客户端
- **Web Crypto API** - 文件哈希计算

## 配置说明

### 分片大小
前端默认分片大小为 2MB，可在 `frontend/src/App.vue` 中修改：
```javascript
const CHUNK_SIZE = 2 * 1024 * 1024; // 2MB
```

### 后端端口
后端默认端口为 3000，可在 `backend/server.js` 中修改：
```javascript
const PORT = 3000;
```

### 前端端口
前端默认端口为 5173，可在 `frontend/vite.config.js` 中修改。

## 使用说明

1. 启动后端和前端服务
2. 在浏览器中打开前端应用
3. 点击"选择文件"按钮或直接拖拽文件到上传区域
4. 系统会自动计算文件哈希并检查已上传的分片
5. 开始上传，实时显示进度和速度
6. 上传完成后，文件将保存在 `backend/uploads/files/` 目录

## 注意事项

- 确保后端服务已启动，前端才能正常上传文件
- 上传的文件会保存在 `backend/uploads/` 目录
- 分片文件会在合并成功后自动删除
- 建议在生产环境中添加文件大小限制和类型验证

## 开发建议

1. **安全性**：添加文件类型验证、大小限制、用户认证等
2. **性能优化**：可以添加并发上传控制、压缩等
3. **错误处理**：完善错误处理和重试机制
4. **存储优化**：可以集成云存储服务（OSS、S3等）

## 许可证

ISC