# 大文件分片上传

**Repository Path**: time-xby/large-file-sharding-upload

## Basic Information

- **Project Name**: 大文件分片上传
- **Description**: 大文件分片上传，前端vue3,后端nodejs
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-12-03
- **Last Updated**: 2026-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 大文件分片上传系统

一个基于 Vue3 前端和 Node.js 后端的现代化大文件分片上传解决方案，支持断点续传和并发上传。

## 🚀 项目特性

- **分片上传**：将大文件分割成小块进行上传，提高上传成功率
- **断点续传**：支持上传中断后从断点继续上传
- **并发上传**：多个分片可以同时上传，提高上传速度
- **进度显示**：实时显示上传进度和状态
- **文件校验**：上传完成后进行文件完整性校验
- **响应式设计**：适配各种屏幕尺寸的设备

## � 最新更新

### 2024 年更新

- **端口优化**：后端服务端口从 3000 改为 3001，避免端口冲突
- **前端适配**：前端 API 地址已同步更新为 http://localhost:3001
- **稳定性提升**：优化了文件上传和合并的稳定性
- **错误处理**：增强了错误处理和用户提示

## � 项目结构

```
uploadChunk/
├── frontend/          # 前端项目（Vue3 + Vite）
│   ├── src/           # 前端源代码
│   │   ├── components/ # Vue组件
│   │   ├── assets/    # 静态资源
│   │   ├── App.vue    # 主应用组件
│   │   └── main.js    # 应用入口
│   ├── public/        # 公共资源
│   ├── index.html     # HTML模板
│   ├── package.json   # 前端依赖配置
│   └── vite.config.js # Vite构建配置
└── backend/           # 后端项目（Node.js + Express）
    ├── chunks/        # 临时分片存储目录
    ├── uploads/       # 最终文件存储目录
    ├── index.js       # 后端主文件
    └── package.json   # 后端依赖配置
```

## 🛠️ 技术栈

### 前端技术

- **Vue 3** - 现代化前端框架
- **Vite** - 快速构建工具
- **Axios** - HTTP 请求库
- **Element Plus** - UI 组件库

### 后端技术

- **Node.js** - JavaScript 运行时环境
- **Express** - Web 应用框架
- **Multer** - 文件上传中间件
- **CORS** - 跨域资源共享

## 📦 安装和运行

### 前置要求

- Node.js (版本 14.0 或更高)
- npm 或 yarn 包管理器

### 1. 克隆项目

```bash
git clone <项目地址>
cd uploadChunk
```

### 2. 安装后端依赖

```bash
cd backend
npm install
```

### 3. 安装前端依赖

```bash
cd ../frontend
npm install
```

### 4. 启动服务

#### 启动后端服务（终端 1）

```bash
cd backend
node index.js
```

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

#### 启动前端服务（终端 2）

```bash
cd frontend
npm run dev
```

前端服务将在 http://localhost:5173 启动

### 5. 访问应用

打开浏览器访问 http://localhost:5173

## 🔧 API 接口说明

### 上传分片

```
POST /upload-chunk
```

**参数：**

- `chunk`: 文件分片数据
- `fileHash`: 文件唯一标识（MD5）
- `chunkIndex`: 分片序号
- `totalChunks`: 总分片数
- `fileName`: 原始文件名

**返回：** 分片上传成功信息

### 合并分片

```
POST /merge-chunks
```

**参数：**

- `fileHash`: 文件唯一标识
- `fileName`: 原始文件名
- `totalChunks`: 总分片数

**返回：** 合并后的文件信息

### 检查分片是否已存在

```
POST /check-chunk
```

**参数：**

- `fileHash`: 文件唯一标识
- `chunkIndex`: 分片序号

**返回：** 分片是否存在状态

### 取消上传任务

```
POST /upload/cancel
```

**参数：**

- `fileHash`: 文件唯一标识

**返回：** 删除的分片数量

### 暂停上传任务

```
POST /upload/pause
```

**参数：**

- `fileHash`: 文件唯一标识

**返回：** 暂停时间戳

## 💡 使用说明

### 上传文件

1. 点击"选择文件"按钮选择要上传的文件
2. 文件将自动开始分片上传
3. 查看上传进度和状态
4. 上传完成后文件将保存在后端 uploads 目录

### 断点续传

- 如果上传过程中断，重新选择相同文件时会自动检测已上传的分片
- 系统会从断点处继续上传，避免重复上传

### 分片大小

- 默认分片大小为 1MB
- 可以根据网络状况和文件大小调整分片大小

## 🔒 安全特性

- **文件校验**：上传完成后进行 MD5 校验确保文件完整性
- **分片验证**：每个分片上传后都进行验证
- **临时清理**：上传失败的分片会自动清理

## 🚨 注意事项

1. **文件存储**：上传的文件默认保存在 backend/uploads 目录
2. **临时文件**：分片上传过程中的临时文件保存在 backend/chunks 目录
3. **并发限制**：建议根据服务器性能调整并发上传数量
4. **文件大小**：理论上支持任意大小的文件上传

## 🐛 故障排除

### 常见问题

**Q: 上传进度卡住不动？**
A: 检查网络连接，确认后端服务正常运行

**Q: 文件上传失败？**
A: 检查后端 uploads 目录是否有写入权限

**Q: 跨域问题？**
A: 确保后端 CORS 配置正确，前端访问地址正确

**Q: 端口 3000 被占用？**
A: 后端服务已改为使用端口 3001，前端 API 地址已相应更新

### 日志查看

- 后端日志：查看终端中的 Node.js 输出
- 前端日志：打开浏览器开发者工具查看控制台

## 📈 性能优化建议

1. **调整分片大小**：根据网络状况调整分片大小（1MB-5MB）
2. **并发控制**：合理设置并发上传数量（3-5 个）
3. **服务器配置**：增加服务器内存和处理能力
4. **CDN 加速**：使用 CDN 分发静态资源

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来改进这个项目！

## 📄 许可证

MIT License

## 📞 联系方式

如有问题或建议，请通过以下方式联系：

- 提交 GitHub Issue
- 发送邮件到项目维护者

---

**开始使用**：按照上面的安装步骤即可快速体验大文件分片上传功能！