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