# upload_file

**Repository Path**: huang_yong_tao/upload_file

## Basic Information

- **Project Name**: upload_file
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-11
- **Last Updated**: 2025-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文件管理系统

一个基于Node.js的现代化文件上传和管理Web应用。

## 功能特性

- 🔐 用户登录认证系统
- 📤 拖拽上传文件（支持多文件）
- 🚀 一键上传（选择即上传）
- 📋 文件列表显示和管理
- 📥 文件下载功能
- 🗑️ 文件删除功能
- 🌐 公开文件查看页面（无需登录）
- 📱 响应式设计，支持移动端
- 🎨 现代化UI界面

## 技术栈

- **后端**: Node.js + Express
- **前端**: 原生HTML/CSS/JavaScript
- **文件处理**: Multer
- **认证**: Express Session + bcryptjs
- **样式**: 现代CSS3 + 渐变设计

## 安装和运行

### 1. 安装依赖

```bash
npm install
```

### 2. 启动应用

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

# 生产模式
npm start
```

### 3. 访问应用

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

## 默认账号

- **用户名**: admin
- **密码**: password

> 注意：密码存储在 `data/users.json` 文件中，可以在管理页面修改密码

## 使用说明

### 公开访问
1. 访问应用首页，直接显示公开文件列表（无需登录）
2. 可以查看和下载文件

### 管理员登录
1. 点击右上角"管理员登录"按钮
2. 使用默认账号登录
3. 进入管理页面进行文件上传和管理

### 上传文件
1. 登录后进入主页面
2. 可以拖拽文件到上传区域，或点击"选择文件"按钮
3. 文件选择后自动上传，无需额外确认
4. 支持多文件同时上传
5. 使用原文件名，保持简洁

### 管理文件
- 查看文件列表：文件名、大小、上传时间、上传者
- 搜索文件：支持按文件名搜索，实时更新分页
- 下载文件：点击文件名或下载按钮
- 删除文件：点击删除按钮
- 扫描文件：自动扫描uploads目录，加载已存在的文件

### 修改密码
- 在管理页面点击右上角"修改密码"按钮
- 输入当前密码和新密码
- 新密码长度不能少于6位
- 密码修改后会自动保存到 `data/users.json` 文件
    ```
        [
            {
                "username": "admin",
                "password": "$2a$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi"
            }
        ] 
    ```

### 公开访问
- 访问 `/public` 页面可以无需登录查看文件列表
- 公开页面只显示文件名和上传时间
- 可以直接下载文件

### Iframe嵌入
- 使用 `/iframe` 页面进行同域嵌入
- 使用 `/iframe-cors` 页面进行跨域嵌入
- 支持自动刷新和错误重试
- 跨域版本包含完整的CORS支持

## 项目结构

```
upload_file/
├── server.js          # 主服务器文件
├── package.json       # 项目配置和依赖
├── public/            # 前端静态文件
│   ├── index.html     # 管理页面（需要登录）
│   ├── login.html     # 登录页面
│   ├── public.html    # 公开文件查看页面（首页）
│   ├── iframe.html    # iframe嵌入页面
│   ├── iframe-cors.html # iframe跨域版本
│   └── iframe-example.html # iframe使用示例
├── uploads/           # 上传文件存储目录（自动创建）
└── README.md          # 项目说明文档
```

## API接口

### 页面路由
- `GET /` - 首页（公开文件列表，无需登录）
- `GET /admin` - 管理页面（需要登录）
- `GET /public` - 公开文件页面（无需登录）
- `GET /iframe` - iframe嵌入页面（无需登录）
- `GET /iframe-cors` - iframe跨域版本（无需登录）
- `GET /login` - 登录页面

### 认证相关
- `POST /login` - 用户登录
- `POST /logout` - 用户退出
- `POST /change-password` - 修改密码（需要登录）

### 文件管理
- `GET /files` - 获取文件列表（需要登录）
- `POST /upload` - 上传文件（需要登录）
- `GET /download/:filename` - 下载文件（需要登录）
- `GET /public/files` - 获取公开文件列表（无需登录）
- `GET /public/download/:fileId` - 公开文件下载（无需登录）
- `DELETE /files/:id` - 删除文件（需要登录）
- `POST /scan-files` - 扫描uploads目录（需要登录）

### 公开访问
- `GET /public` - 公开文件查看页面
- `GET /public/files` - 获取公开文件列表
- `GET /public/download/:fileId` - 公开文件下载

## 安全特性

- 用户会话管理
- 密码加密存储
- 文件上传类型限制
- 认证中间件保护

## 注意事项

- 这是一个演示应用，生产环境建议使用数据库存储用户和文件信息
- 文件存储在本地uploads目录，生产环境建议使用云存储
- 默认密码为"password"，生产环境请修改

## 开发说明

应用使用内存存储数据，重启服务器后数据会丢失。如需持久化存储，可以：

1. 添加数据库（如MongoDB、MySQL）
2. 使用文件系统存储文件元数据
3. 集成云存储服务（如AWS S3、阿里云OSS）

## 许可证

MIT License