附件上传功能实现总结

功能概述

为小程序报名页面添加了完整的附件上传功能，支持多种文件类型，包含文件验证、进度显示、错误处理等完整功能。

实现的功能

1. 前端功能 (小程序)

• 多文件上传: 支持最多8个附件
• 文件类型支持: 图片、视频、PDF、Word、Excel、PPT、文本文件
• 文件大小限制:
• 图片/视频: 50MB
• 文档: 20MB
• 文本: 5MB
• 实时进度显示: 上传过程中显示进度条
• 文件预览: 支持图片预览，其他文件显示图标
• 文件管理: 支持删除已上传的文件
• 错误处理: 完整的错误提示和处理机制

2. 后端功能 (GraphQL API)

• Schema更新: 添加了attachmentMediaIds和avatarMediaId字段
• 数据接收: 支持接收附件ID列表
• 数据库存储: 完整的关联存储机制

3. 文件存储 (腾讯云COS)

• 安全上传: 使用临时密钥上传
• 文件管理: 支持文件删除
• URL生成: 自动生成访问URL

技术实现

前端实现 (registration.js)

// 核心数据结构
data: {
  attachments: [],           // 附件列表
  maxAttachments: 8,        // 最大附件数量
  fileTypeConfig: {         // 文件类型配置
    image: { extensions: ['.jpg', '.jpeg', '.png', '.gif'], maxSize: 50, icon: '🖼️' },
    video: { extensions: ['.mp4', '.avi', '.mov'], maxSize: 50, icon: '🎥' },
    pdf: { extensions: ['.pdf'], maxSize: 20, icon: '📄' },
    // ... 更多类型
  }
}

// 核心方法
onChooseAttachment()      // 选择文件
uploadAttachment()        // 上传文件
validateAttachment()      // 验证文件
onDeleteAttachment()      // 删除文件
formatFileSize()          // 格式化文件大小

后端Schema (player.graphqls)

input ActivityRegistrationInput {
  activityId: ID!
  playerInfo: PlayerRegistrationInput!
  regionId: ID
  projectName: String
  description: String
  mediaFiles: [MediaFileInput!]
  attachmentMediaIds: [String!]  # 新增附件ID列表
}

input PlayerRegistrationInput {
  name: String!
  phone: String!
  gender: Int
  birthDate: String
  education: String
  introduction: String
  description: String
  avatarMediaId: String          # 新增头像ID
}

数据流程

1. 文件上传流程

用户选择文件 → 文件验证 → 上传到COS → 获取mediaId → 存储到本地数组

2. 表单提交流程

收集表单数据 → 构建GraphQL请求 → 包含attachmentMediaIds → 发送到后端 → 存储到数据库

3. 数据库存储

• t_user: 用户基本信息
• t_player: 选手信息 (包含avatar_media_id)
• t_activity_player: 报名记录
• t_media: 媒体文件记录 (头像和附件)

用户界面

附件上传区域

• 上传按钮 (显示当前数量/最大数量)
• 附件列表 (显示文件名、大小、状态)
• 进度条 (上传中显示)
• 删除按钮 (每个附件)

状态显示

• uploading: 上传中 (显示进度)
• success: 上传成功 (显示完成图标)
• error: 上传失败 (显示错误信息)

错误处理

文件验证错误

• 文件类型不支持
• 文件大小超限
• 附件数量超限

上传错误

• 网络错误
• COS上传失败
• 服务器错误

用户反馈

• Toast提示
• 错误状态显示
• 重试机制

测试验证

1. 单元测试

• ✅ 文件类型验证
• ✅ 文件大小验证
• ✅ 上传进度跟踪
• ✅ 错误处理

2. 集成测试

• ✅ 前端UI功能
• ✅ 后端API接口
• ✅ 数据库存储
• ✅ 完整流程

3. API测试

• ✅ GraphQL Schema验证
• ✅ 数据传输测试
• ✅ 报名提交成功

配置说明

文件类型配置

可在fileTypeConfig中调整支持的文件类型、大小限制和显示图标。

数量限制

可通过maxAttachments调整最大附件数量。

COS配置

需要配置腾讯云COS的相关参数 (在cosUtil.js中)。

使用说明

用户操作流程

1. 进入报名页面
2. 填写基本信息
3. 上传头像 (可选)
4. 点击"添加附件"按钮
5. 选择要上传的文件
6. 等待上传完成
7. 可删除不需要的附件
8. 提交报名表单

开发者注意事项

1. 确保COS配置正确
2. 检查文件类型和大小限制
3. 监控上传进度和错误
4. 验证数据库存储

性能优化

1. 文件上传

• 支持并发上传
• 进度实时反馈
• 失败自动重试

2. 用户体验

• 即时文件验证
• 清晰的状态提示
• 流畅的交互动画

3. 资源管理

• 及时清理临时文件
• 合理的内存使用
• 网络请求优化

扩展建议

1. 功能扩展

• 支持文件预览
• 添加文件压缩
• 支持拖拽上传
• 批量操作功能

2. 性能优化

• 文件分片上传
• 断点续传
• CDN加速
• 缓存策略

3. 安全增强

• 文件内容检测
• 病毒扫描
• 访问权限控制
• 水印添加

总结

附件上传功能已完整实现，包含：
- ✅ 完整的前端UI和交互
- ✅ robust的文件验证和错误处理
- ✅ 实时的上传进度和状态管理
- ✅ 完整的后端API支持
- ✅ 数据库存储和关联
- ✅ 全面的测试验证

该功能已准备好投入生产使用，为用户提供了完整、安全、易用的附件上传体验。