# 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] 上传成功后自动刷新素材列表
- [ ] 手动测试验证