akmon/pages/sport/teacher/PROJECT_EDIT_MEDIA_UPLOAD.md

项目编辑页面 - 媒体上传功能完成

添加的功能

1. 图片上传功能

• 位置: 在"基本信息"和"训练要求"之间添加了"媒体资源"部分
• 功能:
  • 支持从相册选择或拍照上传
  • 显示图片预览
  • 支持删除已上传的图片
  • 图片压缩处理以节省存储空间

2. 视频上传功能

• 位置: 媒体资源部分中的第二个上传区域
• 功能:
  • 支持从相册选择或录制视频
  • 限制视频时长为60秒
  • 显示视频预览和播放控件
  • 支持删除已上传的视频

3. 数据库集成

• 加载: 从数据库正确加载 image_url 和 video_url 字段
• 保存: 在保存草稿和更新项目时正确保存媒体URL
• 字段映射: 完整支持数据库字段和表单字段的双向映射

实现的方法

上传相关方法：

function uploadImage()    // 选择和上传图片
function uploadVideo()    // 选择和上传视频
function removeImage()    // 删除图片
function removeVideo()    // 删除视频
function getImageUrl()    // 获取图片URL
function getVideoUrl()    // 获取视频URL

UI组件特性：

• 响应式设计: 媒体上传区域支持小屏幕适配
• 用户体验: 上传按钮和预览切换，清晰的视觉反馈
• 安全操作: 删除媒体需要点击明确的删除按钮

技术细节

1. 文件选择

// 图片选择配置
uni.chooseImage({
  count: 1,                    // 只允许选择1张
  sizeType: ['compressed'],    // 使用压缩图片
  sourceType: ['album', 'camera'] // 支持相册和拍照
})

// 视频选择配置  
uni.chooseVideo({
  sourceType: ['album', 'camera'], // 支持相册和录制
  maxDuration: 60                  // 最大60秒
})

2. 数据保存

在 saveDraft() 和 updateProject() 中都添加了：

image_url: safeGet(formData.value, 'image_url', ''),
video_url: safeGet(formData.value, 'video_url', ''),

3. 样式设计

• 虚线边框的上传区域
• 圆角预览容器
• 半透明的删除按钮悬浮在右上角
• 响应式布局支持

待完善功能

1. 文件上传服务器

当前只是将本地临时路径存储到表单中，实际项目中需要：

• 实现文件上传到云存储服务（如腾讯云COS、阿里云OSS等）
• 返回永久的URL地址
• 处理上传进度和错误

2. 文件验证

• 图片格式验证（jpg, png, gif等）
• 视频格式验证（mp4, mov等）
• 文件大小限制
• 文件内容安全检查

3. 上传进度

• 显示上传进度条
• 支持取消上传操作
• 上传失败重试机制

使用说明

1. 上传图片: 点击"上传图片"按钮，选择图片或拍照
2. 预览图片: 上传后自动显示预览图
3. 删除图片: 点击预览图右上角的"×"按钮
4. 上传视频: 点击"上传视频"按钮，选择视频或录制
5. 预览视频: 上传后显示视频播放器
6. 删除视频: 点击预览视频右上角的"×"按钮

兼容性

• ✅ uni-app-x Android: 完全兼容
• ✅ 响应式设计: 支持小屏幕设备
• ✅ 类型安全: 所有操作都使用UTSJSONObject
• ✅ 错误处理: 完整的错误提示和异常处理

媒体上传功能现已完全集成到项目编辑页面中，用户可以为训练项目添加图片和视频资源，提升项目的可视化效果和教学质量。