添加视频上传界面

2026-01-19 18:22:18 +08:00
parent a467242041
commit 51f3ab67df
3 changed files with 158 additions and 16 deletions
--- a/Docs/DevLogs/Day5.md
+++ b/Docs/DevLogs/Day5.md
@@ -0,0 +1,34 @@
+# Day 5: 前端视频上传功能
+
+---
+
+## 🆕 Web 视频上传功能 (15:32)
+
+**需求**：用户需要通过 Web 界面上传原视频，而非手动放入目录
+
+**实现**：
+- 后端 `POST /api/materials/` 已有完整上传接口
+- 前端 `page.tsx` 新增上传 UI 组件
+
+### 修改的文件
+
+| 文件 | 修改内容 |
+|------|----------|
+| `frontend/src/app/page.tsx` | 添加上传按钮、进度条、handleUpload 函数 |
+
+### 功能特性
+
+1. **上传按钮**：紫色渐变样式，位于素材区块标题栏
+2. **文件验证**：仅接受 MP4/MOV/AVI 格式
+3. **进度显示**：使用 XMLHttpRequest 实时追踪上传进度
+4. **自动刷新**：上传成功后自动刷新素材列表
+5. **错误处理**：显示文件类型错误、网络错误等提示
+
+---
+
+## ✅ Day 5 完成事项
+
+- [x] 添加视频上传 UI 组件
+- [x] 实现上传进度显示
+- [x] 上传成功后自动刷新素材列表
+- [ ] 手动测试验证