# local-file-sharing

**Repository Path**: ZhuMengZhiLu/local-file-sharing

## Basic Information

- **Project Name**: local-file-sharing
- **Description**: 一个基于 Node.js + Koa + Vue3 + Naive UI 的局域网文件传输系统，支持大文件流式上传和下载
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-11
- **Last Updated**: 2025-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 局域网文件传输 Web 应用

一个基于 Node.js + Koa + Vue3 + Naive UI 的局域网文件传输系统，支持大文件流式上传和下载。

## 技术栈

### 后端
- **Node.js** - JavaScript 运行时
- **Koa** - 轻量级 Web 框架
- **busboy** - 流式文件上传处理
- **fs-extra** - 文件系统操作
- **mime-types** - 文件类型识别

### 前端
- **Vue 3** - 渐进式 JavaScript 框架
- **Naive UI** - Vue 3 组件库
- **Vite** - 快速构建工具
- **Axios** - HTTP 客户端

## 功能特性

- ✅ 支持多文件同时上传
- ✅ 支持大文件流式上传（使用 busboy）
- ✅ 文件列表展示和管理
- ✅ 文件下载功能
- ✅ 文件删除功能
- ✅ 响应式设计，支持移动端
- ✅ 暗色主题切换
- ✅ 文件大小格式化显示
- ✅ 文件类型识别
- ✅ 局域网访问支持

## 项目结构

```
local-file-sharing/
├── server.js              # Koa 服务器入口
├── package.json           # 后端依赖配置
├── uploads/               # 文件上传目录
├── client/                # Vue3 前端项目
│   ├── src/
│   │   ├── views/         # 页面组件
│   │   ├── api/           # API 接口
│   │   ├── router/        # 路由配置
│   │   ├── App.vue        # 根组件
│   │   └── main.js        # 入口文件
│   ├── package.json       # 前端依赖配置
│   ├── vite.config.js     # Vite 配置
│   └── index.html         # HTML 模板
└── README.md              # 项目说明
```

## 快速开始

### 1. 安装依赖

```bash
# 安装后端依赖
npm install

# 安装前端依赖
cd client
npm install
cd ..
```

或者使用一键安装：

```bash
npm run install-all
```

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

#### 方式一：分别启动（推荐开发时使用）

```bash
# 启动后端服务器
npm run dev

# 新开终端，启动前端开发服务器
cd client
npm run serve
```

#### 方式二：生产环境

```bash
# 构建前端
npm run build

# 启动服务器（会自动服务前端静态文件）
npm start
```

### 3. 访问应用

- 本地访问：http://localhost:3000
- 局域网访问：http://[你的IP地址]:3000

## API 接口

### 文件上传
- **POST** `/api/upload`
- 支持多文件上传
- 使用 `multipart/form-data` 格式

### 文件列表
- **GET** `/api/files`
- 返回所有上传的文件信息

### 文件下载
- **GET** `/api/download/:filename`
- 直接下载指定文件

### 文件删除
- **DELETE** `/api/files/:filename`
- 删除指定文件

## 配置说明

### 服务器配置
- 默认端口：3000
- 上传目录：`./uploads`
- 支持跨域请求

### 前端配置
- 开发端口：8080
- 代理配置：`/api` 请求代理到后端服务器

## 部署说明

### 生产环境部署

1. 构建前端项目：
```bash
npm run build
```

2. 启动服务器：
```bash
npm start
```

3. 服务器会自动服务前端静态文件，无需额外配置 Nginx

### Docker 部署（可选）

```dockerfile
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

RUN cd client && npm install && npm run build

EXPOSE 3000

CMD ["npm", "start"]
```

## 注意事项

1. 确保防火墙允许 3000 端口访问
2. 上传的文件会保存在 `uploads` 目录中
3. 建议定期清理不需要的文件
4. 大文件上传时请保持网络连接稳定

## 开发说明

### 添加新功能
1. 后端：在 `server.js` 中添加新的路由
2. 前端：在 `client/src/api/` 中添加对应的 API 调用

### 自定义样式
- 主题配置在 `client/src/App.vue` 中
- 组件样式可以通过 Naive UI 的主题系统自定义

## 许可证

MIT License