982 B
982 B
Day 5: 前端视频上传功能
🆕 Web 视频上传功能 (15:32)
需求:用户需要通过 Web 界面上传原视频,而非手动放入目录
实现:
- 后端
POST /api/materials/已有完整上传接口 - 前端
page.tsx新增上传 UI 组件
修改的文件
| 文件 | 修改内容 |
|---|---|
frontend/src/app/page.tsx |
添加上传按钮、进度条、handleUpload 函数 |
功能特性
- 上传按钮:紫色渐变样式,位于素材区块标题栏
- 文件验证:仅接受 MP4/MOV/AVI 格式
- 进度显示:使用 XMLHttpRequest 实时追踪上传进度
- 自动刷新:上传成功后自动刷新素材列表
- 错误处理:显示文件类型错误、网络错误等提示
✅ Day 5 完成事项
- 添加视频上传 UI 组件
- 实现上传进度显示
- 上传成功后自动刷新素材列表
- 手动测试验证