GuangYu/UploaderHui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Nelson
2026-04-18 15:08:57 +08:00
commit 2a67f56512
13 changed files with 2729 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

382
NAS图片上传系统_开发文档.md Normal file
View File

@@ -0,0 +1,382 @@
# NAS图片上传系统 - 开发文档
> **版本**：v0.3
> **日期**：2026-04-17
> **状态**：需求已确认，待开发
---
## 1. 项目概述
### 1.1 项目背景
需要搭建一个简单的Web应用，允许用户通过手机或电脑访问网站，将图片上传到本地NAS存储中。网站部署在公网实例上，通过内网穿透转发请求到本地NAS。
### 1.2 核心需求
- 用户通过手机/电脑浏览器访问网站，选择目标文件夹后上传图片
- 支持多选图片上传，带上传进度条显示
- 上传完成后显示成功上传的图片列表，方便用户确认是否全部上传成功
- 文件夹结构：训练营N期 → 25个班级文件夹，用户只能选择不能创建
- 文件夹自动创建：首次上传时若目标文件夹不存在则自动创建
- 每个训练营文件夹下有一个MD文档，统计图片数量
- 无需登录，公开使用（后续考虑加密码保护）
- 仅上传功能，不提供图片浏览/下载
- 图片主要为屏幕截图
### 1.3 网络架构
公网实例通过内网穿透（frp）将请求转发到本地NAS上的服务。服务端直接运行在群晖NAS上。
```
用户手机/电脑 → 公网实例（frp） → 内网穿透 → NAS服务端
```
---
## 2. 技术方案
### 2.1 技术栈
| 层次 | 技术选型 | 说明 |
|------|----------|------|
| 后端框架 | Python + Flask | 轻量、开发快、文件操作方便，NAS环境通常支持Python |
| 前端 | HTML + CSS + JavaScript | 纯静态页面，无需前端构建工具，部署简单 |
| 图片上传 | XMLHttpRequest | 原生支持上传进度事件 |
| 文件存储 | NAS本地文件系统 | 直接读写NAS磁盘目录 |
| 内网穿透 | frp | 将公网请求转发到内网服务 |
| 配置管理 | .env 文件 | 部署时填写NAS路径、端口等配置 |
---
## 3. 系统架构
### 3.1 整体架构
```
┬── 用户手机/电脑（浏览器）
│
├── 公网实例（frp server）
│
├── frp client → 内网穿透
│
└── 群晖 NAS（Flask + 静态文件）
├── /api/folders 获取文件夹列表
├── /api/upload 上传图片
├── /static/ 前端静态资源
└── {NAS_DATA_PATH}/ NAS存储目录（.env配置）
```
### 3.2 NAS目录结构
```
{NAS_DATA_PATH}/ ← 通过 .env 配置
├── 训练营13期/
│ ├── 统计.md ← 图片数量统计文档
│ ├── 1班/
│ ├── 2班/
│ ├── ...
│ └── 25班/
├── 训练营14期/
│ ├── 统计.md
│ ├── 1班/
│ ├── ...
│ └── 25班/
└── ...
```
### 3.3 服务端项目结构
```
nas-uploader/
├── app.py ← Flask主应用
├── config.py ← 读取 .env 配置
├── .env ← 部署配置（NAS路径、端口等）
├── .env.example ← 配置示例文件
├── requirements.txt ← Python依赖
├── static/
│ ├── css/style.css ← 样式文件
│ ├── js/app.js ← 前端逻辑
│ └── img/ ← 图标等静态资源
├── templates/
│ └── index.html ← 主页面
└── start.sh ← 启动脚本
```
### 3.4 .env 配置文件
```env
# NAS图片存储根目录（部署时修改为实际路径）
NAS_DATA_PATH=/volume1/nas_data
# 服务端口
PORT=5000
# 允许的图片格式（小写，逗号分隔）
ALLOWED_EXTENSIONS=jpg,jpeg,png,gif,webp
# 单次上传最大文件数量
MAX_FILES_COUNT=100
# 单张图片最大大小（MB）
MAX_FILE_SIZE_MB=20
```
---
## 4. 功能设计
### 4.1 文件夹选择功能
#### 4.1.1 文件夹获取规则
- 后端扫描NAS根目录（`NAS_DATA_PATH`），读取所有"训练营*期"格式的文件夹
- 每个训练营文件夹下，读取所有"*班"格式的子文件夹
- 前端以两级联动选择器展示：第一级选训练营，第二级选班级
- 文件夹列表按名称排序（数字自然排序）
- **不显示**各班级已有图片数量
#### 4.1.2 文件夹自动创建
- 当用户选择某个班级并上传图片时，若对应的文件夹不存在，则自动创建
- 创建逻辑：检查训练营文件夹 → 检查班级文件夹 → 不存在则创建
- 同时创建对应的统计.md文档（若训练营文件夹是新建的）
- **新的"训练营N期"文件夹由管理员在NAS上手动创建**，用户不能通过网页创建新训练营
### 4.2 图片上传功能
#### 4.2.1 上传流程
```
用户选择文件夹 → 点击"选择图片"按钮 → 多选图片 → 点击"开始上传"
```
- 支持的图片格式：JPG、JPEG、PNG、GIF、WEBP（不支持HEIC）
- 单次上传数量限制：最多100张
- 单张大小限制：20MB
- 采用逐张上传策略，每张图片独立显示进度，同时显示总体进度
#### 4.2.2 图片命名规则
上传后图片按以下格式重命名：
```
训练营{n}期-{x}班-{时间戳}-{随机数}.{扩展名}
```
示例：
```
训练营13期-1班-20260417143022-a3f8b2.png
训练营13期-1班-20260417143022-7c2e91.jpg
```
- `{n}`：训练营期数
- `{x}`：班级编号
- `{时间戳}`：精确到秒，格式 `YYYYMMDDHHmmss`
- `{随机数}`：6位十六进制随机字符串
- `{扩展名}`：保留原始文件的扩展名
- 若文件名已存在（极低概率），自动在末尾追加序号：`-a3f8b2-1.png`
#### 4.2.3 上传进度显示
- 总体进度条：显示已上传完成的数量 / 总数量
- 单张进度条：每张图片的上传百分比
- 状态标识：等待中 / 上传中 / 成功 / 失败
#### 4.2.4 上传完成反馈
- 上传成功后，页面底部显示"已成功上传"图片缩略图列表
- 每张图片显示：缩略图 + 新文件名 + 上传状态
- 失败的图片明确标红，显示失败原因，支持"重试"操作
- 显示摘要信息："成功上传15张，失败 1张"
### 4.3 图片统计功能
#### 4.3.1 统计.md格式
每个训练营文件夹下的统计.md内容格式如下：
```markdown
# 训练营XX期 图片统计
更新时间：2026-04-17 14:30:00
图片总数：156
| 班级 | 图片数量 |
|------|----------|
| 1班 | 12 |
| 2班 | 8 |
| ... | ... |
| 25班 | 6 |
```
#### 4.3.2 统计更新触发
- 每次上传成功后，自动更新对应训练营的统计.md
- 统计方式：扫描训练营文件夹及其所有子目录，统计图片文件数量
- 图片文件判定：根据文件扩展名（jpg、jpeg、png、gif、webp）
- 更新时间记录在文档头部
---
## 5. API设计
### 5.1 获取文件夹列表
**GET /api/folders**
返回所有训练营及其下的班级文件夹。
**响应示例：**
```json
{
"folders": [
{
"name": "训练营13期",
"classes": ["1班", "2班", "3班", "4班", "5班", "...", "25班"]
},
{
"name": "训练营14期",
"classes": ["1班", "3班"]
}
]
}
```
### 5.2 上传图片
**POST /api/upload**
接受multipart/form-data格式的图片上传。
**请求参数：**
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| folder | string | 是 | 训练营名称，如"训练营13期" |
| class | string | 是 | 班级名称，如"1班" |
| files | File[] | 是 | 图片文件数组，支持多文件 |
**响应示例：**
```json
{
"success": true,
"uploaded": [
{ "filename": "训练营13期-1班-20260417143022-a3f8b2.png", "status": "success" },
{ "filename": "训练营13期-1班-20260417143023-7c2e91.jpg", "status": "success" }
],
"failed": [
{ "filename": "photo3.bmp", "status": "failed", "reason": "文件格式不支持" }
]
}
```
---
## 6. 前端页面设计
### 6.1 页面布局
页面采用简洁的单页设计，适配手机和电脑访问（响应式布局）。
页面从上到下分为三个区域：
#### 6.1.1 顶部：文件夹选择区
- 第一行：下拉选择"训练营"（如"训练营13期"）
- 第二行：下拉选择"班级"（如"1班"）
- 班级列表根据选中的训练营动态加载
#### 6.1.2 中部：图片选择和上传区
- "选择图片"按钮：触发文件选择器，支持多选
- 已选择的图片列表：显示缩略图、文件名、可删除
- "开始上传"按钮：触发上传操作
- 进度条：总体进度 + 单张进度
#### 6.1.3 底部：上传结果区
- 显示成功上传的图片缩略图网格
- 失败的图片显示红色标记和"重试"按钮
- 显示摘要信息："成功上传15张，失败 1张"
### 6.2 移动端适配
- 采用响应式设计，自动适配手机和电脑屏幕
- 手机端优化：按钮大小适中触摸操作，图片缩略图网格自动调整列数
- 支持手机原生图片选择器（accept="image/*"）
---
## 7. 部署方案
### 7.1 frp内网穿透配置
详见 [frp内网穿透_原理与部署指南.md](./frp内网穿透_原理与部署指南.md)
**frpc.toml（NAS侧）关键配置：**
```toml
serverAddr = "你的公网IP"
serverPort = 7000
auth.token = "你的认证密码"
[[proxies]]
name = "nas-uploader"
type = "tcp"
localIP = "127.0.0.1"
localPort = 5000
remotePort = 8080
```
### 7.2 服务启动
```bash
#!/bin/bash
# start.sh
cd /path/to/nas-uploader
source venv/bin/activate # 可选：使用虚拟环境
python app.py
```
### 7.3 部署步骤
1. 将项目文件上传到群晖NAS
2. 复制 `.env.example` 为 `.env`，修改 `NAS_DATA_PATH` 为实际的共享文件夹路径
3. 安装Python依赖：`pip install -r requirements.txt`
4. 启动服务：`bash start.sh`
5. 配置frpc客户端连接到公网服务器
6. 浏览器访问 `http://公网IP:8080` 验证
---
## 8. 开发计划
| 阶段 | 内容 | 预估工时 |
|------|------|----------|
| 第一阶段 | 后端基础：Flask服务 + .env配置 + API + 文件操作 | 2-3小时 |
| 第二阶段 | 前端页面：文件夹选择 + 图片上传 + 进度条 + 结果展示 | 2-3小时 |
| 第三阶段 | 统计功能：自动更新统计.md | 1小时 |
| 第四阶段 | 优化：移动端适配 + 异常处理 + 测试 | 1-2小时 |
| 第五阶段 | 部署：frp配置 + 群晖NAS部署 + 服务上线 | 0.5小时 |
---
## 9. 风险与注意事项
- **并发上传**：多用户同时上传到同一文件夹时，文件名含时间戳+随机数，冲突概率极低；若冲突则自动追加序号
- **存储空间**：需关注NAS磁盘空间，建议在上传前检查剩余空间
- **网络稳定性**：内网穿透可能因网络波动导致上传中断，需支持失败重试
- **安全性**：当前公开访问无需登录，后续考虑加密码保护；后端必须验证文件类型防止恶意上传
- **文件类型验证**：后端严格校验文件扩展名和MIME类型，防止上传非图片文件
---
## 10. 后续规划（暂不实现）
- 访问密码保护
- HTTPS 加密传输
- 图片浏览/下载功能
- 管理后台

525
frp内网穿透_原理与部署指南.md Normal file
View File

@@ -0,0 +1,525 @@
# frp 内网穿透 - 原理与部署指南
> **适用对象**：没有技术背景的人员
> **阅读时间**：约 15 分钟
> **最后更新**：2026-04-17
---
## 1. 什么是 frp？为什么需要它？
### 1.1 一句话解释
**frp 就是一座"桥"**，让外面的人可以通过公网访问到你家里（或公司内网）的设备。
### 1.2 生活类比
想象一下这个场景：
```
你家有一台 NAS（网络存储器），里面存了很多照片。
你想让朋友们通过互联网访问你的 NAS 上传照片。
但是问题来了：
- 你家的 NAS 没有"公网身份证"（公网IP），外面的人找不到它
- 就像你家住在一个封闭小区里，快递员进不来
怎么办？
- 你在小区门口找了一个"门卫"（frp 服务端），他站在公网上
- 你在家里装了一个"对讲机"（frp 客户端），和门卫保持通话
- 朋友来找你时，先到门卫那里，门卫通过对讲机通知你，然后帮你把东西转达过去
这就是 frp 的工作原理！
```
### 1.3 专业术语对照表
| 你会看到的术语 | 大白话解释 |
|---------------|-----------|
| 公网 IP | 你在互联网上的"门牌号"，全球唯一，任何人都能找到 |
| 内网 IP | 你家内部的"房间号"，只有家里的人能找到 |
| 内网穿透 | 让外面的人能绕过小区门禁，找到你家里的设备 |
| frps（frp server） | frp 服务端，装在公网服务器上，相当于"门卫" |
| frpc（frp client） | frp 客户端，装在你家里的 NAS 上，相当于"对讲机" |
| 端口（Port） | 设备上的"窗口编号"，比如 80 窗口用来传网页，22 窗口用来远程控制 |
| 反向代理 | 代替别人收快递，然后转交给你 |
---
## 2. frp 是怎么工作的？
### 2.1 整体流程图
```
互联网（公网）
│
┌───────────────────┼───────────────────┐
│ │ │
用户手机/电脑 公网服务器（frps） 其他网站
"我要上传照片" "门卫"在这里等着 （互不干扰）
│ │
│ ① 请求到达公网服务器 │
│ ──────────────────────→ │
│ │
│ ② 服务器转发给家里的NAS │
│ │ ──────────────────────→
│ │ │
│ 你家的 NAS（frpc） │
│ "对讲机"收到消息 │
│ 处理上传请求 │
│ │
│ ③ NAS 处理完，原路返回 │
│ ←────────────────────── │ ←──────────────────────
│ │ │
收到"上传成功！" │ │
```
### 2.2 用大白话描述整个过程
1. **你买了一台公网服务器**（比如阿里云、腾讯云的云服务器），它有一个公网 IP，全世界都能访问到它
2. **在公网服务器上安装 frps**（服务端），它就像一个24小时值班的门卫
3. **在你家里的 NAS 上安装 frpc**（客户端），它主动连接到公网服务器，说："嘿，我是某某某家的 NAS，如果有人找我，请转接给我"
4. **当用户访问你的网站时**，请求先到达公网服务器，服务器再通过已经建立好的连接，把请求转发到你家里的 NAS
5. **NAS 处理完后**，结果原路返回给用户
> **关键点**：是 NAS 主动"打电话"给公网服务器的，所以不需要你家有公网 IP。只要你的 NAS 能上网，就能用 frp。
---
## 3. 你需要准备什么？
### 3.1 硬件/服务清单
| 需要的东西 | 说明 | 大概费用 |
|-----------|------|---------|
| 一台公网服务器 | 阿里云/腾讯云等云服务器，最便宜的就行 | 约 50-100 元/月 |
| NAS 设备 | 你已有的 NAS（群晖、威联通等） | 已有 |
| 家里的网络 | NAS 需要能正常上网 | 已有 |
### 3.2 需要提前获取的信息
在开始安装之前，请准备好以下信息：
```
□ 公网服务器的 IP 地址（例如：123.45.67.89）
□ 公网服务器的登录密码
□ NAS 的登录密码（或 SSH 权限）
□ NAS 在家里的内网 IP（例如：192.168.1.100）
□ 你想给网站分配的端口号（建议用 8080）
```
> **怎么看 NAS 的内网 IP？**
> 登录 NAS 的管理界面，一般在"网络设置"或"控制面板 → 网络"里能看到，通常格式是 `192.168.x.x`
---
## 4. 安装步骤
### 4.1 第一步：在公网服务器上安装 frps（服务端）
> 这一步通常由技术人员或有服务器经验的人操作。如果你是租的云服务器，可以请服务商帮忙。
#### 4.1.1 下载 frp
登录到你的公网服务器，执行以下命令：
```bash
# 下载 frp（以 Linux 64位 为例）
wget https://github.com/fatedier/frp/releases/download/v0.61.1/frp_0.61.1_linux_amd64.tar.gz
# 解压
tar -xzf frp_0.61.1_linux_amd64.tar.gz
# 进入目录
cd frp_0.61.1_linux_amd64
```
#### 4.1.2 创建配置文件
用文本编辑器创建一个配置文件 `frps.toml`：
```bash
nano frps.toml
```
写入以下内容（直接复制粘贴即可）：
```toml
# frp 服务端配置文件
# 绑定端口 - frpc 客户端通过这个端口连接到服务端
bindPort = 7000
# 认证令牌 - 相当于暗号，客户端和服务端必须一致才能连接
# 请把下面的 your_secret_token 改成一个只有你知道的密码！
auth.token = "your_secret_token"
# frp 管理面板（可选，方便查看运行状态）
webServer.addr = "0.0.0.0"
webServer.port = 7500
webServer.user = "admin"
webServer.password = "admin123"
```
> ⚠️ **重要**：请把 `your_secret_token` 改成一个强密码！这个密码用于验证客户端身份，防止别人盗用你的服务器。
#### 4.1.3 启动 frps
```bash
# 启动服务端
./frps -c frps.toml
```
如果看到类似 `frps started successfully` 的提示，说明启动成功了！
#### 4.1.4 设置开机自启（推荐）
让 frps 在服务器重启后自动运行：
```bash
# 创建系统服务
sudo nano /etc/systemd/system/frps.service
```
写入以下内容：
```ini
[Unit]
Description=frp server
After=network.target
[Service]
Type=simple
ExecStart=/root/frp_0.61.1_linux_amd64/frps -c /root/frp_0.61.1_linux_amd64/frps.toml
Restart=always
RestartSec=5s
[Install]
WantedBy=multi-user.target
```
> ⚠️ 注意：把路径替换成你实际的 frp 安装路径。
```bash
# 启用并启动服务
sudo systemctl enable frps
sudo systemctl start frps
# 查看运行状态
sudo systemctl status frps
```
---
### 4.2 第二步：在 NAS 上安装 frpc（客户端）
> 这一步在 NAS 上操作。不同品牌的 NAS 操作方式略有不同，下面以通用方式说明。
#### 4.2.1 下载 frp
SSH 登录到你的 NAS，执行：
```bash
# 如果是 x86 架构的 NAS（大多数群晖/威联通是这种）
wget https://github.com/fatedier/frp/releases/download/v0.61.1/frp_0.61.1_linux_amd64.tar.gz
# 如果是 ARM 架构的 NAS（部分 NAS 是这种）
# wget https://github.com/fatedier/frp/releases/download/v0.61.1/frp_0.61.1_linux_arm64.tar.gz
# 解压
tar -xzf frp_0.61.1_linux_amd64.tar.gz
cd frp_0.61.1_linux_amd64
```
#### 4.2.2 创建配置文件
创建配置文件 `frpc.toml`：
```bash
nano frpc.toml
```
写入以下内容：
```toml
# frp 客户端配置文件
# 公网服务器的地址和端口
serverAddr = "123.45.67.89" # ← 改成你的公网服务器 IP
serverPort = 7000
# 认证令牌 - 必须和服务端设置的一致！
auth.token = "your_secret_token" # ← 改成和服务端一样的密码
# 图片上传服务的代理配置
[[proxies]]
name = "nas-uploader"
type = "tcp"
localIP = "127.0.0.1" # NAS 本机地址
localPort = 5000 # NAS 上网站运行的端口
remotePort = 8080 # 公网服务器上对外暴露的端口
```
**参数解释：**
| 参数 | 含义 | 怎么填 |
|------|------|--------|
| serverAddr | 公网服务器的 IP | 填你的云服务器 IP |
| serverPort | 服务端的连接端口 | 默认 7000，和服务端配置一致 |
| auth.token | 认证密码 | 和服务端填一样的 |
| localPort | NAS 上网站的端口 | 5000（网站默认端口） |
| remotePort | 对外开放的端口 | 8080（用户通过这个端口访问网站） |
#### 4.2.3 启动 frpc
```bash
./frpc -c frpc.toml
```
看到 `start proxy success` 就说明连接成功了！
#### 4.2.4 设置开机自启
```bash
sudo nano /etc/systemd/system/frpc.service
```
写入：
```ini
[Unit]
Description=frp client
After=network.target
[Service]
Type=simple
ExecStart=/root/frp_0.61.1_linux_amd64/frpc -c /root/frp_0.61.1_linux_amd64/frpc.toml
Restart=always
RestartSec=5s
[Install]
WantedBy=multi-user.target
```
```bash
sudo systemctl enable frpc
sudo systemctl start frpc
sudo systemctl status frpc
```
---
### 4.3 第三步：验证是否成功
打开浏览器，访问：
```
http://你的公网服务器IP:8080
```
例如：`http://123.45.67.89:8080`
如果能看到网站页面，恭喜你，frp 配置成功了！🎉
---
## 5. 群晖 NAS 特别说明
如果你使用的是**群晖 NAS**，操作方式稍有不同：
### 5.1 通过 SSH 连接群晖
1. 打开群晖控制面板 → 终端机和 SNMP → 勾选"启动 SSH 功能"
2. 在电脑上用终端工具连接：
```bash
ssh 你的NAS用户名@192.168.1.100
```
### 5.2 使用 Docker 安装 frpc（推荐）
群晖支持 Docker，用 Docker 安装更方便管理：
1. 打开群晖的 **Docker** 套件（或 Container Manager）
2. 在 **注册表** 中搜索 `frpc`，下载镜像
3. 在 **映像** 中双击下载好的镜像，创建容器
4. 在 **卷** 设置中，挂载配置文件
5. 在 **网络** 设置中，勾选"使用与 Docker Host 相同的网络"
或者通过命令行：
```bash
# 创建配置文件目录
mkdir -p /volume1/docker/frpc
# 把 frpc.toml 放到这个目录下
# 然后启动容器
docker run -d \
--name frpc \
--restart always \
-v /volume1/docker/frpc/frpc.toml:/etc/frp/frpc.toml \
--network host \
snowdreamtech/frpc
```
---
## 6. 常见问题排查
### 6.1 连接不上怎么办？
按以下顺序检查：
```
第1步：检查公网服务器上的 frps 是否在运行
→ 在服务器上执行：systemctl status frps
→ 如果没运行，执行：systemctl start frps
第2步：检查 NAS 上的 frpc 是否在运行
→ 在 NAS 上执行：systemctl status frpc
→ 如果没运行，执行：systemctl start frpc
第3步：检查防火墙是否开放了端口
→ 公网服务器的 7000 端口（frp 通信）和 8080 端口（网站访问）必须开放
→ 在云服务器管理控制台的"安全组"中添加规则
第4步：检查 token 是否一致
→ frps 和 frpc 的 auth.token 必须完全一样
→ 注意大小写和空格
第5步：检查服务器的 IP 地址是否正确
→ frpc.toml 中的 serverAddr 是否填对了
```
### 6.2 端口被占用怎么办？
如果提示端口被占用，说明有其他程序已经在用这个端口了：
```bash
# 查看哪个程序占用了端口
lsof -i :7000 # 查看 7000 端口
lsof -i :8080 # 查看 8080 端口
# 解决方法：换一个端口号
# 比如把 remotePort = 8080 改成 remotePort = 9090
```
### 6.3 网站能访问但上传失败？
```
→ 检查 NAS 上的网站服务（Flask）是否在运行
→ 检查 localPort 是否和网站实际运行的端口一致
→ 检查 NAS 的存储目录是否有写入权限
```
### 6.4 速度很慢怎么办？
```
→ frp 的速度取决于公网服务器的带宽和 NAS 的上传带宽
→ 建议选择国内云服务器（阿里云/腾讯云），延迟更低
→ 如果只是传图片，一般带宽足够了
```
---
## 7. 安全注意事项
### 7.1 一定要做的事
- ✅ **修改默认 token**：不要用示例中的 `your_secret_token`，改成强密码
- ✅ **设置防火墙规则**：只开放必要的端口（7000 和 8080），关闭其他端口
- ✅ **定期更新 frp**：关注 frp 的版本更新，及时升级修复安全漏洞
### 7.2 建议做的事
- 🔶 **使用 HTTPS**：通过 Nginx 配置 SSL 证书，让传输更安全
- 🔶 **限制访问 IP**：如果只有特定的人需要访问，可以在防火墙中限制来源 IP
- 🔶 **定期查看日志**：检查是否有异常访问记录
### 7.3 不要做的事
- ❌ 不要把 token 写在公开的地方（比如 GitHub）
- ❌ 不要使用过于简单的 token（比如 `123456`）
- ❌ 不要开放不必要的端口
---
## 8. 速查表
### 8.1 常用命令
| 操作 | 命令 |
|------|------|
| 启动 frps | `./frps -c frps.toml` |
| 启动 frpc | `./frpc -c frpc.toml` |
| 查看服务状态 | `systemctl status frps` 或 `systemctl status frpc` |
| 重启服务 | `systemctl restart frps` 或 `systemctl restart frpc` |
| 查看日志 | `journalctl -u frps -f` 或 `journalctl -u frpc -f` |
### 8.2 文件位置速查
| 文件 | 位置 | 说明 |
|------|------|------|
| frps 配置 | 公网服务器上的 `frps.toml` | 服务端配置 |
| frpc 配置 | NAS 上的 `frpc.toml` | 客户端配置 |
| frps 服务文件 | `/etc/systemd/system/frps.service` | 开机自启配置 |
| frpc 服务文件 | `/etc/systemd/system/frpc.service` | 开机自启配置 |
### 8.3 端口速查
| 端口 | 用途 | 在哪里 |
|------|------|--------|
| 7000 | frp 通信端口 | 公网服务器 |
| 7500 | frp 管理面板（可选） | 公网服务器 |
| 5000 | 网站服务端口 | NAS |
| 8080 | 对外访问端口 | 公网服务器 |
---
## 9. 附录：完整配置文件模板
### 9.1 frps.toml（公网服务器）
```toml
# ============================================
# frp 服务端配置 - 放在公网服务器上
# ============================================
# frp 通信端口（客户端通过此端口连接）
bindPort = 7000
# 认证令牌（请修改为你自己的强密码！）
auth.token = "请改成你自己的强密码"
# 管理面板（可选，方便查看状态）
webServer.addr = "0.0.0.0"
webServer.port = 7500
webServer.user = "admin"
webServer.password = "请改成管理面板密码"
```
### 9.2 frpc.toml（NAS 客户端）
```toml
# ============================================
# frp 客户端配置 - 放在 NAS 上
# ============================================
# 公网服务器地址（请修改为你的服务器 IP）
serverAddr = "123.45.67.89"
serverPort = 7000
# 认证令牌（必须和服务端一致！）
auth.token = "请改成你自己的强密码"
# 图片上传网站代理
[[proxies]]
name = "nas-uploader"
type = "tcp"
localIP = "127.0.0.1"
localPort = 5000
remotePort = 8080
```
---
> **有问题？** 把报错信息截图发给技术人员，或者查看 frp 官方文档：https://gofrp.org/zh-cn/

14
nas-uploader/.env.example Normal file
View File

@@ -0,0 +1,14 @@
# NAS图片存储根目录（部署时修改为实际路径）
NAS_DATA_PATH=/volume1/nas_data
# 服务端口
PORT=5000
# 允许的图片格式（小写，逗号分隔）
ALLOWED_EXTENSIONS=jpg,jpeg,png,gif,webp
# 单次上传最大文件数量
MAX_FILES_COUNT=100
# 单张图片最大大小（MB）
MAX_FILE_SIZE_MB=20

31
nas-uploader/.gitignore vendored Normal file
View File

@@ -0,0 +1,31 @@
# Python
__pycache__/
*.py[cod]
*.pyo
*.egg-info/
dist/
build/
*.egg
venv/
.venv/
# 环境配置（包含敏感信息，不上传）
.env
# IDE
.vscode/
.idea/
*.swp
*.swo
*~
# OS
.DS_Store
Thumbs.db
# 日志
*.log
nohup.out
# 测试数据
test_*/

287
nas-uploader/app.py Normal file
View File

@@ -0,0 +1,287 @@
import os
import re
import uuid
import shutil
from datetime import datetime
from flask import Flask, request, jsonify, render_template
from config import (
NAS_DATA_PATH, PORT, ALLOWED_EXTENSIONS,
MAX_FILES_COUNT, MAX_FILE_SIZE_MB, ALLOWED_MIME_TYPES
)
app = Flask(__name__)
# ========== 工具函数 ==========
def get_camp_folders():
"""获取所有训练营文件夹列表，按期数排序"""
if not os.path.exists(NAS_DATA_PATH):
os.makedirs(NAS_DATA_PATH, exist_ok=True)
return []
folders = []
for name in os.listdir(NAS_DATA_PATH):
full_path = os.path.join(NAS_DATA_PATH, name)
if os.path.isdir(full_path) and re.match(r'^训练营\d+期$', name):
folders.append(name)
# 按期数数字排序
folders.sort(key=lambda x: int(re.search(r'\d+', x).group()) if re.search(r'\d+', x) else 0)
return folders
def get_class_folders(camp_name):
"""获取某个训练营下的所有班级文件夹，按班号排序"""
camp_path = os.path.join(NAS_DATA_PATH, camp_name)
if not os.path.exists(camp_path):
return []
classes = []
for name in os.listdir(camp_path):
full_path = os.path.join(camp_path, name)
if os.path.isdir(full_path) and re.match(r'^\d+班$', name):
classes.append(name)
# 按班号数字排序
classes.sort(key=lambda x: int(re.search(r'\d+', x).group()) if re.search(r'\d+', x) else 0)
return classes
def validate_file(file):
"""验证上传文件是否合法，返回 (是否合法, 错误原因)"""
if not file or not file.filename:
return False, "空文件"
# 检查文件大小
file.seek(0, os.SEEK_END)
size = file.tell()
file.seek(0)
if size > MAX_FILE_SIZE_MB * 1024 * 1024:
return False, f"文件超过 {MAX_FILE_SIZE_MB}MB 限制"
if size == 0:
return False, "空文件"
# 检查扩展名
ext = file.filename.rsplit('.', 1)[-1].lower() if '.' in file.filename else ''
if ext not in ALLOWED_EXTENSIONS:
return False, f"不支持的格式: {ext}"
# 检查MIME类型
mime = file.mimetype
expected_mime = ALLOWED_MIME_TYPES.get(ext)
if expected_mime and mime and not mime.startswith(expected_mime.split('/')[0]):
return False, f"MIME类型不匹配: {mime}"
return True, None
def generate_filename(original_name, camp_name, class_name):
"""生成新文件名：训练营{n}期-{x}班-{时间戳}-{随机数}.{扩展名}"""
camp_match = re.search(r'(\d+)', camp_name)
class_match = re.search(r'(\d+)', class_name)
camp_num = camp_match.group(1) if camp_match else '?'
class_num = class_match.group(1) if class_match else '?'
now = datetime.now()
timestamp = now.strftime('%Y%m%d%H%M%S')
random_str = uuid.uuid4().hex[:6]
ext = original_name.rsplit('.', 1)[-1].lower() if '.' in original_name else 'jpg'
return f"训练营{camp_num}期-{class_num}班-{timestamp}-{random_str}.{ext}"
def get_unique_filepath(dir_path, filename):
"""获取不冲突的文件路径，若存在则追加序号"""
filepath = os.path.join(dir_path, filename)
if not os.path.exists(filepath):
return filepath
# 分离文件名和扩展名
name, ext = os.path.splitext(filename)
counter = 1
while True:
new_name = f"{name}-{counter}{ext}"
new_path = os.path.join(dir_path, new_name)
if not os.path.exists(new_path):
return new_path
counter += 1
def ensure_folders(camp_name, class_name):
"""确保训练营和班级文件夹存在，不存在则创建"""
camp_path = os.path.join(NAS_DATA_PATH, camp_name)
class_path = os.path.join(camp_path, class_name)
stat_file = os.path.join(camp_path, '统计.md')
created_camp = False
if not os.path.exists(camp_path):
os.makedirs(camp_path, exist_ok=True)
created_camp = True
if not os.path.exists(class_path):
os.makedirs(class_path, exist_ok=True)
# 如果训练营是新创建的，初始化统计文件
if created_camp and not os.path.exists(stat_file):
update_statistics(camp_name)
return camp_path, class_path
def update_statistics(camp_name):
"""更新某个训练营的统计.md文件"""
camp_path = os.path.join(NAS_DATA_PATH, camp_name)
stat_file = os.path.join(camp_path, '统计.md')
if not os.path.exists(camp_path):
return
# 扫描所有班级文件夹
class_stats = []
total = 0
for name in os.listdir(camp_path):
full_path = os.path.join(camp_path, name)
if not os.path.isdir(full_path):
continue
if not re.match(r'^\d+班$', name):
continue
# 统计该班级下的图片数量
count = 0
for fname in os.listdir(full_path):
fpath = os.path.join(full_path, fname)
if os.path.isfile(fpath):
ext = fname.rsplit('.', 1)[-1].lower() if '.' in fname else ''
if ext in ALLOWED_EXTENSIONS:
count += 1
class_stats.append((name, count))
total += count
# 按班号排序
class_stats.sort(key=lambda x: int(re.search(r'\d+', x[0]).group()) if re.search(r'\d+', x[0]) else 0)
# 写入统计文件
now = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
lines = [
f"# {camp_name} 图片统计",
"",
f"更新时间：{now}",
f"图片总数：{total}",
"",
"| 班级 | 图片数量 |",
"|------|----------|",
]
for class_name, count in class_stats:
lines.append(f"| {class_name} | {count} |")
with open(stat_file, 'w', encoding='utf-8') as f:
f.write('\n'.join(lines) + '\n')
# ========== 页面路由 ==========
@app.route('/')
def index():
return render_template('index.html')
# ========== API 路由 ==========
@app.route('/api/folders', methods=['GET'])
def api_folders():
"""获取所有训练营及其下的班级文件夹"""
folders = []
for camp_name in get_camp_folders():
classes = get_class_folders(camp_name)
folders.append({
'name': camp_name,
'classes': classes,
})
return jsonify({'folders': folders})
@app.route('/api/upload', methods=['POST'])
def api_upload():
"""上传图片"""
camp_name = request.form.get('folder', '').strip()
class_name = request.form.get('class', '').strip()
files = request.files.getlist('files')
# 参数校验
if not camp_name or not re.match(r'^训练营\d+期$', camp_name):
return jsonify({'success': False, 'error': '无效的训练营名称'}), 400
if not class_name or not re.match(r'^\d+班$', class_name):
return jsonify({'success': False, 'error': '无效的班级名称'}), 400
if not files:
return jsonify({'success': False, 'error': '未选择文件'}), 400
if len(files) > MAX_FILES_COUNT:
return jsonify({'success': False, 'error': f'单次最多上传 {MAX_FILES_COUNT} 张'}), 400
# 确保文件夹存在
camp_path, class_path = ensure_folders(camp_name, class_name)
# 逐个处理文件
uploaded = []
failed = []
has_new_upload = False
for file in files:
# 验证文件
valid, reason = validate_file(file)
if not valid:
failed.append({
'filename': file.filename if file.filename else '未知文件',
'status': 'failed',
'reason': reason,
})
continue
# 生成文件名并保存
new_filename = generate_filename(file.filename, camp_name, class_name)
filepath = get_unique_filepath(class_path, new_filename)
try:
file.save(filepath)
uploaded.append({
'filename': os.path.basename(filepath),
'status': 'success',
})
has_new_upload = True
except Exception as e:
failed.append({
'filename': file.filename,
'status': 'failed',
'reason': str(e),
})
# 如果有新文件上传成功，更新统计
if has_new_upload:
try:
update_statistics(camp_name)
except Exception:
pass # 统计更新失败不影响上传结果
return jsonify({
'success': len(uploaded) > 0,
'uploaded': uploaded,
'failed': failed,
})
# ========== 启动 ==========
if __name__ == '__main__':
# 确保存储目录存在
if not os.path.exists(NAS_DATA_PATH):
os.makedirs(NAS_DATA_PATH, exist_ok=True)
print(f"已创建存储目录: {NAS_DATA_PATH}")
print(f"服务启动在 http://0.0.0.0:{PORT}")
app.run(host='0.0.0.0', port=PORT, debug=False)

29
nas-uploader/config.py Normal file
View File

@@ -0,0 +1,29 @@
import os
from dotenv import load_dotenv
# 加载 .env 文件
load_dotenv()
# NAS图片存储根目录
NAS_DATA_PATH = os.getenv('NAS_DATA_PATH', '/volume1/nas_data')
# 服务端口
PORT = int(os.getenv('PORT', '5000'))
# 允许的图片格式
ALLOWED_EXTENSIONS = os.getenv('ALLOWED_EXTENSIONS', 'jpg,jpeg,png,gif,webp').split(',')
# 单次上传最大文件数量
MAX_FILES_COUNT = int(os.getenv('MAX_FILES_COUNT', '100'))
# 单张图片最大大小（MB）
MAX_FILE_SIZE_MB = int(os.getenv('MAX_FILE_SIZE_MB', '20'))
# 允许的MIME类型映射
ALLOWED_MIME_TYPES = {
'jpg': 'image/jpeg',
'jpeg': 'image/jpeg',
'png': 'image/png',
'gif': 'image/gif',
'webp': 'image/webp',
}

2
nas-uploader/requirements.txt Normal file
View File

@@ -0,0 +1,2 @@
flask==3.0.0
python-dotenv==1.0.0

32
nas-uploader/start.sh Normal file
View File

@@ -0,0 +1,32 @@
#!/bin/bash
# NAS图片上传系统 - 启动脚本
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
cd "$SCRIPT_DIR"
# 检查 .env 文件是否存在
if [ ! -f .env ]; then
echo "错误：未找到 .env 配置文件"
echo "请复制 .env.example 为 .env 并修改配置："
echo " cp .env.example .env"
exit 1
fi
# 检查是否在虚拟环境中
if [ -z "$VIRTUAL_ENV" ]; then
# 尝试激活本地虚拟环境
if [ -d "venv" ]; then
source venv/bin/activate
echo "已激活虚拟环境: venv"
fi
fi
# 检查依赖
python3 -c "import flask" 2>/dev/null
if [ $? -ne 0 ]; then
echo "正在安装依赖..."
pip3 install -r requirements.txt --break-system-packages
fi
echo "启动服务..."
python3 app.py

537
nas-uploader/static/css/style.css Normal file
View File

@@ -0,0 +1,537 @@
/* ========== Reset & Base ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f0f2f5;
color: #333;
line-height: 1.6;
min-height: 100vh;
}
.container {
max-width: 720px;
margin: 0 auto;
padding: 20px 16px 40px;
}
/* ========== Header ========== */
.header {
text-align: center;
padding: 24px 0 20px;
}
.header h1 {
font-size: 24px;
font-weight: 600;
color: #1a1a2e;
}
.subtitle {
color: #888;
font-size: 14px;
margin-top: 6px;
}
/* ========== Folder Section ========== */
.folder-section {
background: #fff;
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.form-group {
margin-bottom: 14px;
}
.form-group:last-child {
margin-bottom: 0;
}
.form-group label {
display: block;
font-size: 14px;
font-weight: 500;
color: #555;
margin-bottom: 6px;
}
.form-group select {
width: 100%;
height: 44px;
padding: 0 14px;
border: 1.5px solid #d9d9d9;
border-radius: 8px;
font-size: 15px;
color: #333;
background: #fafafa;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group select:focus {
outline: none;
border-color: #4f6ef7;
box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.1);
background-color: #fff;
}
.form-group select:disabled {
background: #f5f5f5;
color: #bbb;
cursor: not-allowed;
}
/* ========== Upload Section ========== */
.upload-section {
background: #fff;
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Select Area */
.select-area {
text-align: center;
padding: 30px 20px;
border: 2px dashed #d9d9d9;
border-radius: 10px;
transition: border-color 0.2s, background 0.2s;
}
.select-area:hover {
border-color: #4f6ef7;
background: #f8f9ff;
}
.select-icon {
font-size: 40px;
margin-bottom: 10px;
}
.select-area p {
color: #666;
font-size: 14px;
}
.select-area .hint {
color: #aaa;
font-size: 12px;
margin-top: 4px;
}
/* ========== Buttons ========== */
.btn {
display: inline-block;
padding: 10px 24px;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
user-select: none;
-webkit-user-select: none;
}
.btn:active {
transform: scale(0.97);
}
.btn-primary {
background: #4f6ef7;
color: #fff;
}
.btn-primary:hover {
background: #3d5ce0;
}
.btn-primary:disabled {
background: #b0bfee;
cursor: not-allowed;
transform: none;
}
.btn-secondary {
background: #f0f2f5;
color: #555;
margin-top: 12px;
}
.btn-secondary:hover {
background: #e4e6eb;
}
.btn-danger {
background: #ff4d4f;
color: #fff;
padding: 4px 12px;
font-size: 12px;
}
.btn-danger:hover {
background: #e63e40;
}
.btn-small {
padding: 4px 12px;
font-size: 12px;
border-radius: 6px;
}
.btn-large {
width: 100%;
padding: 14px;
font-size: 16px;
margin-top: 16px;
}
/* ========== Preview Section ========== */
.preview-section {
margin-top: 20px;
}
.preview-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
color: #555;
}
.preview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 10px;
max-height: 300px;
overflow-y: auto;
padding: 4px;
}
.preview-item {
position: relative;
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden;
border: 1px solid #eee;
}
.preview-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.preview-item .remove-btn {
position: absolute;
top: 4px;
right: 4px;
width: 22px;
height: 22px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
border-radius: 50%;
font-size: 14px;
line-height: 22px;
text-align: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s;
}
.preview-item:hover .remove-btn {
opacity: 1;
}
.preview-item .file-name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 10px;
padding: 2px 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ========== Progress Section ========== */
.progress-section {
margin-top: 20px;
}
.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 14px;
color: #555;
}
.progress-percent {
font-weight: 600;
color: #4f6ef7;
}
.progress-bar {
width: 100%;
height: 8px;
background: #eee;
border-radius: 4px;
overflow: hidden;
margin-bottom: 16px;
}
.progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #4f6ef7, #7c8cf8);
border-radius: 4px;
transition: width 0.3s ease;
}
.file-progress-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 250px;
overflow-y: auto;
}
.file-progress-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: #fafafa;
border-radius: 8px;
font-size: 13px;
}
.file-progress-item .status-icon {
font-size: 16px;
flex-shrink: 0;
width: 20px;
text-align: center;
}
.file-progress-item .file-info {
flex: 1;
min-width: 0;
}
.file-progress-item .file-info .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
}
.file-progress-item .file-info .detail {
font-size: 11px;
color: #999;
}
.file-progress-item .mini-progress {
width: 60px;
height: 4px;
background: #eee;
border-radius: 2px;
overflow: hidden;
flex-shrink: 0;
}
.file-progress-item .mini-progress .mini-fill {
height: 100%;
background: #4f6ef7;
border-radius: 2px;
transition: width 0.2s;
}
.file-progress-item.status-success .status-icon {
color: #52c41a;
}
.file-progress-item.status-failed .status-icon {
color: #ff4d4f;
}
.file-progress-item.status-failed {
background: #fff2f0;
}
/* ========== Result Section ========== */
.result-section {
background: #fff;
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.result-header {
margin-bottom: 16px;
}
.result-header h2 {
font-size: 18px;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 4px;
}
.result-summary {
font-size: 14px;
color: #888;
}
.result-summary .success-count {
color: #52c41a;
font-weight: 600;
}
.result-summary .fail-count {
color: #ff4d4f;
font-weight: 600;
}
.result-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
max-height: 400px;
overflow-y: auto;
}
.result-item {
position: relative;
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
}
.result-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.result-item.success {
border-color: #52c41a;
}
.result-item.failed {
border-color: #ff4d4f;
}
.result-item .result-name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 10px;
padding: 4px 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.result-item .result-status {
position: absolute;
top: 4px;
right: 4px;
font-size: 14px;
}
/* ========== Responsive ========== */
@media (max-width: 480px) {
.container {
padding: 12px 10px 30px;
}
.header h1 {
font-size: 20px;
}
.folder-section,
.upload-section,
.result-section {
padding: 14px;
border-radius: 10px;
}
.select-area {
padding: 20px 14px;
}
.preview-grid {
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 8px;
}
.result-grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 8px;
}
.btn-large {
padding: 12px;
font-size: 15px;
}
/* 移动端始终显示删除按钮 */
.preview-item .remove-btn {
opacity: 1;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.preview-grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
}
/* ========== Scrollbar ========== */
.preview-grid::-webkit-scrollbar,
.file-progress-list::-webkit-scrollbar,
.result-grid::-webkit-scrollbar {
width: 4px;
}
.preview-grid::-webkit-scrollbar-thumb,
.file-progress-list::-webkit-scrollbar-thumb,
.result-grid::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 2px;
}
/* ========== Loading animation ========== */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.uploading {
animation: pulse 1.5s ease-in-out infinite;
}

413
nas-uploader/static/js/app.js Normal file
View File

@@ -0,0 +1,413 @@
// ========== 写死的选项数据 ==========
const ALL_CAMPS = [];
for (let i = 13; i <= 26; i++) {
ALL_CAMPS.push(`训练营${i}期`);
}
const ALL_CLASSES = [];
for (let i = 1; i <= 25; i++) {
ALL_CLASSES.push(`${i}班`);
}
const ALLOWED_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
const MAX_FILE_SIZE_MB = 20;
const MAX_FILES_COUNT = 100;
// ========== 状态管理 ==========
let state = {
selectedCamp: '',
selectedClass: '',
selectedFiles: [], // { file, id, previewUrl }
uploadResults: [], // { file, id, status, filename, reason, previewUrl }
isUploading: false,
};
// ========== DOM 元素 ==========
const $ = (sel) => document.querySelector(sel);
const campSelect = $('#camp-select');
const classSelect = $('#class-select');
const fileInput = $('#file-input');
const uploadSection = $('.upload-section');
const selectArea = $('#select-area');
const previewSection = $('#preview-section');
const previewGrid = $('#preview-grid');
const selectedCount = $('#selected-count');
const btnUpload = $('#btn-upload');
const btnClearAll = $('#btn-clear-all');
const progressSection = $('#progress-section');
const progressText = $('#progress-text');
const progressPercent = $('#progress-percent');
const progressFill = $('#progress-fill');
const fileProgressList = $('#file-progress-list');
const resultSection = $('#result-section');
const resultSummary = $('#result-summary');
const resultGrid = $('#result-grid');
const btnRetry = $('#btn-retry');
const btnNewUpload = $('#btn-new-upload');
// ========== 初始化 ==========
function init() {
loadFolders();
bindEvents();
}
// ========== 文件夹加载（前端写死选项） ==========
function loadFolders() {
campSelect.innerHTML = '<option value="">-- 请选择训练营 --</option>';
ALL_CAMPS.forEach(camp => {
const opt = document.createElement('option');
opt.value = camp;
opt.textContent = camp;
campSelect.appendChild(opt);
});
}
function onCampChange() {
const campName = campSelect.value;
state.selectedCamp = campName;
classSelect.innerHTML = '';
classSelect.disabled = true;
state.selectedClass = '';
if (!campName) {
classSelect.innerHTML = '<option value="">-- 请先选择训练营 --</option>';
return;
}
classSelect.disabled = false;
classSelect.innerHTML = '<option value="">-- 请选择班级 --</option>';
ALL_CLASSES.forEach(cls => {
const opt = document.createElement('option');
opt.value = cls;
opt.textContent = cls;
classSelect.appendChild(opt);
});
}
function onClassChange() {
state.selectedClass = classSelect.value;
}
// ========== 文件选择 ==========
function onFileSelect(e) {
const files = Array.from(e.target.files);
if (!files.length) return;
const remaining = MAX_FILES_COUNT - state.selectedFiles.length;
if (remaining <= 0) {
alert(`最多只能选择 ${MAX_FILES_COUNT} 张图片`);
fileInput.value = '';
return;
}
const filesToAdd = files.slice(0, remaining);
let rejected = 0;
filesToAdd.forEach(file => {
if (file.size > MAX_FILE_SIZE_MB * 1024 * 1024) {
rejected++;
return;
}
const ext = file.name.split('.').pop().toLowerCase();
if (!ALLOWED_EXTENSIONS.includes(ext)) {
rejected++;
return;
}
const id = Date.now() + '_' + Math.random().toString(36).substr(2, 6);
const previewUrl = URL.createObjectURL(file);
state.selectedFiles.push({ file, id, previewUrl });
});
if (rejected > 0) {
alert(`已跳过 ${rejected} 个文件（格式不支持或超过 20MB）`);
}
fileInput.value = '';
renderPreview();
}
function removeFile(id) {
const idx = state.selectedFiles.findIndex(f => f.id === id);
if (idx !== -1) {
URL.revokeObjectURL(state.selectedFiles[idx].previewUrl);
state.selectedFiles.splice(idx, 1);
}
renderPreview();
}
function clearAllFiles() {
state.selectedFiles.forEach(f => URL.revokeObjectURL(f.previewUrl));
state.selectedFiles = [];
renderPreview();
}
function renderPreview() {
const count = state.selectedFiles.length;
if (count === 0) {
previewSection.style.display = 'none';
selectArea.style.display = 'block';
return;
}
selectArea.style.display = 'none';
previewSection.style.display = 'block';
selectedCount.textContent = count;
btnUpload.disabled = !state.selectedCamp || !state.selectedClass || state.isUploading;
previewGrid.innerHTML = '';
state.selectedFiles.forEach(item => {
const div = document.createElement('div');
div.className = 'preview-item';
div.innerHTML = `
<img src="${item.previewUrl}" alt="${item.file.name}">
<button class="remove-btn" onclick="removeFile('${item.id}')">×</button>
<div class="file-name">${item.file.name}</div>
`;
previewGrid.appendChild(div);
});
}
// ========== 上传逻辑（真实API） ==========
function uploadFile(file, campName, className, onProgress) {
return new Promise((resolve) => {
const formData = new FormData();
formData.append('folder', campName);
formData.append('class', className);
formData.append('files', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload');
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
onProgress(Math.round((e.loaded / e.total) * 100));
}
};
xhr.onload = () => {
try {
const data = JSON.parse(xhr.responseText);
if (xhr.status === 200 && data.uploaded && data.uploaded.length > 0) {
resolve({ type: 'success', filename: data.uploaded[0].filename });
} else if (data.failed && data.failed.length > 0) {
resolve({ type: 'failed', reason: data.failed[0].reason });
} else {
resolve({ type: 'failed', reason: data.error || '上传失败' });
}
} catch (e) {
resolve({ type: 'failed', reason: '服务器响应异常' });
}
};
xhr.onerror = () => {
resolve({ type: 'failed', reason: '网络错误' });
};
xhr.ontimeout = () => {
resolve({ type: 'failed', reason: '请求超时' });
};
xhr.timeout = 120000; // 2分钟超时
xhr.send(formData);
});
}
async function startUpload() {
if (!state.selectedCamp || !state.selectedClass) {
alert('请先选择训练营和班级');
return;
}
if (state.selectedFiles.length === 0) {
alert('请先选择图片');
return;
}
state.isUploading = true;
btnUpload.disabled = true;
btnUpload.textContent = '上传中...';
btnUpload.classList.add('uploading');
// 切换到进度视图
previewSection.style.display = 'none';
resultSection.style.display = 'none';
progressSection.style.display = 'block';
// 初始化进度列表
fileProgressList.innerHTML = '';
state.selectedFiles.forEach(item => {
const div = document.createElement('div');
div.className = 'file-progress-item';
div.id = `progress-${item.id}`;
div.innerHTML = `
<span class="status-icon">⏳</span>
<div class="file-info">
<div class="name">${item.file.name}</div>
<div class="detail">等待上传...</div>
</div>
<div class="mini-progress"><div class="mini-fill" style="width:0%"></div></div>
`;
fileProgressList.appendChild(div);
});
// 逐张上传
let completed = 0;
const total = state.selectedFiles.length;
state.uploadResults = [];
for (const item of state.selectedFiles) {
const el = $(`#progress-${item.id}`);
const icon = el.querySelector('.status-icon');
const detail = el.querySelector('.detail');
const miniFill = el.querySelector('.mini-fill');
// 上传中
icon.textContent = '📤';
detail.textContent = '上传中...';
// 调用真实API
const result = await uploadFile(item.file, state.selectedCamp, state.selectedClass, (percent) => {
miniFill.style.width = `${percent}%`;
});
if (result.type === 'success') {
icon.textContent = '✅';
detail.textContent = result.filename;
el.classList.add('status-success');
miniFill.style.width = '100%';
miniFill.style.background = '#52c41a';
state.uploadResults.push({
file: item.file,
id: item.id,
previewUrl: item.previewUrl,
status: 'success',
filename: result.filename,
});
} else if (result.type === 'failed') {
icon.textContent = '❌';
detail.textContent = `上传失败：${result.reason}`;
el.classList.add('status-failed');
miniFill.style.width = '100%';
miniFill.style.background = '#ff4d4f';
state.uploadResults.push({
file: item.file,
id: item.id,
previewUrl: item.previewUrl,
status: 'failed',
filename: item.file.name,
reason: result.reason,
});
}
completed++;
const percent = Math.round((completed / total) * 100);
progressText.textContent = `上传中... ${completed} / ${total}`;
progressPercent.textContent = `${percent}%`;
progressFill.style.width = `${percent}%`;
}
// 上传完成
state.isUploading = false;
btnUpload.textContent = '开始上传';
btnUpload.classList.remove('uploading');
setTimeout(() => {
progressSection.style.display = 'none';
uploadSection.style.display = 'none';
showResults();
}, 500);
}
// ========== 结果展示 ==========
function showResults() {
resultSection.style.display = 'block';
const successList = state.uploadResults.filter(r => r.status === 'success');
const failedList = state.uploadResults.filter(r => r.status === 'failed');
let summaryHtml = `共上传 <strong>${state.uploadResults.length}</strong> 张图片，`;
summaryHtml += `<span class="success-count">成功 ${successList.length} 张</span>`;
if (failedList.length > 0) {
summaryHtml += `，<span class="fail-count">失败 ${failedList.length} 张</span>`;
}
resultSummary.innerHTML = summaryHtml;
btnRetry.style.display = failedList.length > 0 ? 'inline-block' : 'none';
resultGrid.innerHTML = '';
state.uploadResults.forEach(item => {
const div = document.createElement('div');
div.className = `result-item ${item.status}`;
div.innerHTML = `
<img src="${item.previewUrl}" alt="${item.filename}">
<div class="result-name">${item.status === 'success' ? item.filename : item.filename}</div>
<span class="result-status">${item.status === 'success' ? '✅' : '❌'}</span>
`;
resultGrid.appendChild(div);
});
}
function retryFailed() {
const failedItems = state.uploadResults.filter(r => r.status === 'failed');
state.selectedFiles = failedItems.map(item => ({
file: item.file,
id: item.id,
previewUrl: item.previewUrl,
}));
state.uploadResults = [];
resultSection.style.display = 'none';
progressSection.style.display = 'none';
uploadSection.style.display = 'block';
renderPreview();
}
function newUpload() {
state.selectedFiles.forEach(f => URL.revokeObjectURL(f.previewUrl));
state.selectedFiles = [];
state.uploadResults = [];
state.isUploading = false;
resultSection.style.display = 'none';
progressSection.style.display = 'none';
uploadSection.style.display = 'block';
previewSection.style.display = 'none';
selectArea.style.display = 'block';
btnUpload.disabled = true;
btnUpload.textContent = '开始上传';
}
// ========== 事件绑定 ==========
function bindEvents() {
campSelect.addEventListener('change', onCampChange);
classSelect.addEventListener('change', onClassChange);
fileInput.addEventListener('change', onFileSelect);
btnUpload.addEventListener('click', startUpload);
btnClearAll.addEventListener('click', clearAllFiles);
btnRetry.addEventListener('click', retryFailed);
btnNewUpload.addEventListener('click', newUpload);
campSelect.addEventListener('change', () => {
if (state.selectedFiles.length > 0) renderPreview();
});
classSelect.addEventListener('change', () => {
if (state.selectedFiles.length > 0) renderPreview();
});
}
// ========== 启动 ==========
document.addEventListener('DOMContentLoaded', init);

88
nas-uploader/templates/index.html Normal file
View File

@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>训练营图片上传</title>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<div class="container">
<!-- 顶部标题 -->
<header class="header">
<h1>📷 训练营图片上传</h1>
<p class="subtitle">选择训练营和班级，上传截图文件</p>
</header>
<!-- 文件夹选择区 -->
<section class="folder-section">
<div class="form-group">
<label for="camp-select">选择训练营</label>
<select id="camp-select">
<option value="">-- 请选择训练营 --</option>
</select>
</div>
<div class="form-group">
<label for="class-select">选择班级</label>
<select id="class-select" disabled>
<option value="">-- 请先选择训练营 --</option>
</select>
</div>
</section>
<!-- 图片选择和上传区 -->
<section class="upload-section">
<div class="select-area" id="select-area">
<div class="select-icon">📁</div>
<p>点击下方按钮选择图片</p>
<p class="hint">支持 JPG / PNG / GIF / WEBP，单张不超过 20MB，最多 100 张</p>
<button class="btn btn-primary" id="btn-select" onclick="document.getElementById('file-input').click()">
选择图片
</button>
<input type="file" id="file-input" accept="image/jpeg,image/png,image/gif,image/webp" multiple hidden>
</div>
<!-- 已选图片预览 -->
<div class="preview-section" id="preview-section" style="display:none;">
<div class="preview-header">
<span>已选择 <strong id="selected-count">0</strong> 张图片</span>
<button class="btn btn-small btn-danger" id="btn-clear-all">清空全部</button>
</div>
<div class="preview-grid" id="preview-grid"></div>
<button class="btn btn-primary btn-large" id="btn-upload" disabled>
开始上传
</button>
</div>
<!-- 上传进度区 -->
<div class="progress-section" id="progress-section" style="display:none;">
<div class="progress-header">
<span id="progress-text">上传中... 0 / 0</span>
<span id="progress-percent">0%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progress-fill"></div>
</div>
<div class="file-progress-list" id="file-progress-list"></div>
</div>
</section>
<!-- 上传结果区 -->
<section class="result-section" id="result-section" style="display:none;">
<div class="result-header">
<h2>上传结果</h2>
<p id="result-summary"></p>
</div>
<div class="result-grid" id="result-grid"></div>
<button class="btn btn-primary" id="btn-retry" style="display:none;">
重试失败的图片
</button>
<button class="btn btn-secondary" id="btn-new-upload">
继续上传
</button>
</section>
</div>
<script src="/static/js/app.js"></script>
</body>
</html>

389
部署文档.md Normal file
View File

@@ -0,0 +1,389 @@
# NAS图片上传系统 - 部署文档
> **适用环境**：群晖NAS + 公网服务器（frp内网穿透）
> **最后更新**：2026-04-17
---
## 1. 部署前准备
### 1.1 你需要的东西
| 项目 | 说明 |
|------|------|
| 群晖NAS | 已开启SSH，能通过终端访问 |
| 公网服务器 | 有公网IP，已安装frps（frp服务端） |
| NAS存储路径 | 决定图片存放在哪个共享文件夹下 |
### 1.2 项目文件清单
部署前确认以下文件完整：
```
nas-uploader/
├── app.py ← Flask后端主程序
├── config.py ← 配置读取模块
├── .env.example ← 配置模板（需复制为.env）
├── requirements.txt ← Python依赖
├── start.sh ← 启动脚本
├── static/
│ ├── css/style.css ← 页面样式
│ ├── js/app.js ← 前端逻辑
│ └── img/ ← 图标资源（可选）
└── templates/
└── index.html ← 主页面
```
---
## 2. 群晖NAS上的部署步骤
### 2.1 上传项目文件
**方法一：通过群晖网页上传**
1. 打开群晖 File Station
2. 进入你想存放项目的共享文件夹（如 `web`）
3. 上传整个 `nas-uploader` 文件夹
**方法二：通过SSH上传**
```bash
# 在你的电脑上执行（假设NAS内网IP为 192.168.1.100）
scp -r nas-uploader/ your_admin@192.168.1.100:/volume1/web/
```
### 2.2 SSH登录群晖NAS
```bash
ssh your_admin@192.168.1.100
```
> 如果提示"connection refused"，需要在群晖控制面板 → 终端机和SNMP → 开启SSH功能
### 2.3 配置环境
```bash
# 进入项目目录（根据你的实际路径调整）
cd /volume1/web/nas-uploader
# 复制配置文件
cp .env.example .env
# 编辑配置文件
vi .env
```
**必须修改的配置项：**
```env
# 改成你实际的NAS存储路径，例如：
NAS_DATA_PATH=/volume1/photo/训练营图片
# 其他配置一般不需要改
PORT=5000
ALLOWED_EXTENSIONS=jpg,jpeg,png,gif,webp
MAX_FILES_COUNT=100
MAX_FILE_SIZE_MB=20
```
> 💡 **路径说明**：`NAS_DATA_PATH` 是图片存储的根目录，上传的图片会保存在这个目录下的 `训练营N期/X班/` 子文件夹中。建议使用群晖已有的共享文件夹路径。
### 2.4 安装Python依赖
群晖NAS自带Python 3，但可能缺少pip。按以下步骤操作：
```bash
# 检查Python版本
python3 --version
# 如果有pip，直接安装
pip3 install flask python-dotenv
# 如果提示权限问题
pip3 install flask python-dotenv --break-system-packages
# 如果没有pip，先安装
# 群晖DS718+等型号可以直接通过套件中心安装Python3
```
### 2.5 首次启动测试
```bash
cd /volume1/web/nas-uploader
python3 app.py
```
看到以下输出说明启动成功：
```
服务启动在 http://0.0.0.0:5000
* Running on http://127.0.0.1:5000
```
此时在浏览器访问 `http://NAS内网IP:5000` 应该能看到上传页面。
### 2.6 验证上传功能
1. 打开 `http://NAS内网IP:5000`
2. 选择训练营和班级
3. 选择几张图片上传
4. 检查 `NAS_DATA_PATH` 目录下是否自动创建了对应的文件夹和图片文件
5. 检查统计.md是否正确生成
---
## 3. 配置frp内网穿透
> 详细原理请参考 [frp内网穿透_原理与部署指南.md](./frp内网穿透_原理与部署指南.md)
### 3.1 在NAS上配置frpc
如果NAS上还没有frpc，先安装：
```bash
# 下载frp（根据NAS架构选择）
# x86架构（大多数群晖）
wget https://github.com/fatedier/frp/releases/download/v0.61.1/frp_0.61.1_linux_amd64.tar.gz
tar -xzf frp_0.61.1_linux_amd64.tar.gz
cd frp_0.61.1_linux_amd64
```
创建配置文件 `frpc.toml`：
```toml
serverAddr = "你的公网服务器IP"
serverPort = 7000
auth.token = "你的frp认证密码"
[[proxies]]
name = "nas-uploader"
type = "tcp"
localIP = "127.0.0.1"
localPort = 5000
remotePort = 8080
```
启动frpc：
```bash
./frpc -c frpc.toml
```
### 3.2 公网服务器上的frps配置
确保公网服务器上的 `frps.toml` 已配置好：
```toml
bindPort = 7000
auth.token = "你的frp认证密码" # 和frpc保持一致
```
### 3.3 验证公网访问
在手机或电脑上（使用非内网网络）访问：
```
http://公网服务器IP:8080
```
如果能打开上传页面，说明穿透配置成功。
---
## 4. 设置开机自启（推荐）
### 4.1 Flask服务自启
在NAS上创建systemd服务：
```bash
sudo vi /etc/systemd/system/nas-uploader.service
```
写入以下内容（**注意修改路径**）：
```ini
[Unit]
Description=NAS Image Uploader
After=network.target
[Service]
Type=simple
WorkingDirectory=/volume1/web/nas-uploader
ExecStart=/usr/bin/python3 /volume1/web/nas-uploader/app.py
Restart=always
RestartSec=5s
[Install]
WantedBy=multi-user.target
```
启用服务：
```bash
sudo systemctl enable nas-uploader
sudo systemctl start nas-uploader
# 查看状态
sudo systemctl status nas-uploader
```
> ⚠️ **注意**：部分群晖型号可能不支持systemd，可以用 `supervisor` 替代，或者通过群晖的"任务计划"功能设置开机脚本。
### 4.2 frpc自启
```bash
sudo vi /etc/systemd/system/frpc.service
```
```ini
[Unit]
Description=frp client
After=network.target
[Service]
Type=simple
ExecStart=/volume1/web/frp/frpc -c /volume1/web/frp/frpc.toml
Restart=always
RestartSec=5s
[Install]
WantedBy=multi-user.target
```
```bash
sudo systemctl enable frpc
sudo systemctl start frpc
```
### 4.3 使用群晖任务计划（替代方案）
如果systemd不可用，可以通过群晖控制面板设置：
1. 控制面板 → 任务计划 → 新增 → 触发的任务 → 用户自定义脚本
2. 常规：设置任务名称"启动图片上传服务"
3. 事件：开机
4. 任务设置：用户账号选root，脚本内容：
```bash
#!/bin/bash
cd /volume1/web/nas-uploader
nohup python3 app.py > /volume1/web/nas-uploader/app.log 2>&1 &
cd /volume1/web/frp
nohup ./frpc -c frpc.toml > /volume1/web/frp/frpc.log 2>&1 &
```
---
## 5. 群晖Docker部署（可选）
如果你的群晖支持Docker（Container Manager套件），可以用Docker部署：
### 5.1 创建Dockerfile
在项目根目录创建 `Dockerfile`：
```dockerfile
FROM python:3.11-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
EXPOSE 5000
CMD ["python3", "app.py"]
```
### 5.2 构建和运行
```bash
cd /volume1/web/nas-uploader
# 构建镜像
docker build -t nas-uploader .
# 运行容器
docker run -d \
--name nas-uploader \
--restart always \
-p 5000:5000 \
-v /volume1/photo/训练营图片:/app/data \
-e NAS_DATA_PATH=/app/data \
nas-uploader
```
> `-v` 参数将NAS的存储目录挂载到容器内
---
## 6. 常见问题排查
### 6.1 页面打不开
```
检查步骤：
1. Flask服务是否在运行？
→ systemctl status nas-uploader 或 ps aux | grep python
2. 端口是否被占用？
→ netstat -tlnp | grep 5000
3. 防火墙是否放行？
→ 群晖控制面板 → 安全性 → 防火墙 → 编辑规则
```
### 6.2 公网打不开
```
检查步骤：
1. frpc是否在运行？ → ps aux | grep frpc
2. frpc日志有无报错？ → cat /path/to/frpc.log
3. 公网服务器防火墙是否开放了8080端口？
4. frp的token是否一致？
```
### 6.3 上传失败
```
检查步骤：
1. NAS_DATA_PATH路径是否正确？ → ls -la 路径
2. 目录是否有写入权限？ → touch 路径/test && rm 路径/test
3. 磁盘空间是否充足？ → df -h
4. 查看Flask日志 → cat /path/to/nas-uploader/app.log
```
### 6.4 图片上传后找不到文件
```
检查步骤：
1. 确认.env中的NAS_DATA_PATH路径
2. 查看该路径下是否生成了训练营文件夹
3. 文件夹名称格式必须是"训练营N期"
```
---
## 7. 维护命令速查
| 操作 | 命令 |
|------|------|
| 启动服务 | `cd /volume1/web/nas-uploader && python3 app.py` |
| 停止服务 | `sudo systemctl stop nas-uploader` |
| 重启服务 | `sudo systemctl restart nas-uploader` |
| 查看日志 | `sudo journalctl -u nas-uploader -f` |
| 查看存储目录 | `ls -la $NAS_DATA_PATH` |
| 查看磁盘空间 | `df -h` |
| 手动更新统计 | `python3 -c "from app import update_statistics; update_statistics('训练营13期')"` |
---
## 8. 安全建议
- **当前版本无密码保护**，任何人知道网址都可以上传
- 建议不要将网址公开分享给无关人员
- 后续版本会添加访问密码功能
- 建议定期检查上传的文件，防止滥用
- 如果发现异常，可以暂时停止Flask服务：`sudo systemctl stop nas-uploader`