6.3 KiB
Implementation Plan: 图片上传功能
Overview
实现后台管理系统的图片上传功能，包括后端上传接口（支持本地存储和腾讯云COS）、前端上传组件优化、以及业务页面改造。
Tasks
-
1. 后端基础设施搭建
-
1.1 创建上传相关的数据模型
- 创建
UploadResponse响应模型 - 创建
UploadResult内部结果模型 - 位置:
HoneyBox.Admin.Business/Models/Upload/ - Requirements: 1.1
- 创建
-
1.2 创建存储提供者接口 IStorageProvider
- 定义
StorageType属性 - 定义
UploadAsync方法 - 定义
DeleteAsync方法 - 位置:
HoneyBox.Admin.Business/Services/Interfaces/ - Requirements: 2.1, 3.1
- 定义
-
1.3 创建上传服务接口 IUploadService
- 定义
UploadImageAsync方法 - 定义
UploadImagesAsync方法 - 位置:
HoneyBox.Admin.Business/Services/Interfaces/ - Requirements: 1.1
- 定义
-
-
2. 本地存储实现
-
2.1 实现 LocalStorageProvider
- 实现文件保存到 wwwroot/uploads/{yyyy}/{MM}/{dd}/
- 实现目录自动创建
- 实现唯一文件名生成
- 返回相对URL路径
- 位置:
HoneyBox.Admin.Business/Services/Storage/ - Requirements: 2.1, 2.2, 2.3, 2.4, 1.5
-
2.2 编写 LocalStorageProvider 单元测试
- 测试目录创建
- 测试文件保存
- 测试URL生成格式
- Property 4: 存储策略一致性 - 本地存储URL格式
- Validates: Requirements 2.3
-
-
3. 腾讯云COS存储实现
-
3.1 添加腾讯云COS SDK依赖
- 添加
Tencent.QCloud.Cos.SdkNuGet包 - Requirements: 3.1
- 添加
-
3.2 实现 TencentCosProvider
- 从配置读取COS参数
- 实现文件上传到COS
- 实现按日期创建对象路径
- 返回Domain拼接的完整URL
- 位置:
HoneyBox.Admin.Business/Services/Storage/ - Requirements: 3.1, 3.2, 3.3, 3.5
-
3.3 编写 TencentCosProvider 单元测试
- 测试配置读取
- 测试URL生成格式
- 测试错误处理
- Property 4: 存储策略一致性 - COS URL格式
- Validates: Requirements 3.3, 3.4
-
-
4. 上传服务实现
-
4.1 实现 UploadService
- 实现文件格式验证（jpg, jpeg, png, gif, webp）
- 实现文件大小验证（最大10MB）
- 实现根据配置选择存储提供者
- 实现默认使用本地存储的降级逻辑
- 位置:
HoneyBox.Admin.Business/Services/ - Requirements: 1.2, 1.3, 1.4, 4.1, 4.2, 4.3
-
4.2 编写 UploadService 单元测试
- Property 1: 文件格式验证
- Property 2: 文件大小验证
- Property 3: 文件名唯一性
- Validates: Requirements 1.2, 1.3, 1.4, 1.5
-
-
5. 上传API控制器
-
5.1 创建 UploadController
- 实现 POST /api/admin/upload/image 单文件上传
- 实现 POST /api/admin/upload/images 批量上传
- 添加权限验证
- 位置:
HoneyBox.Admin.Business/Controllers/ - Requirements: 1.1
-
5.2 注册服务到依赖注入容器
- 注册 IUploadService
- 注册 IStorageProvider 实现
- 位置:
HoneyBox.Admin.Business/Modules/ - Requirements: 4.1
-
-
6. Checkpoint - 后端功能验证
- 确保所有后端测试通过
- 使用Postman或Swagger测试上传接口
- 验证本地存储和COS存储都能正常工作
- 如有问题请询问用户
-
7. 前端上传组件优化
- 7.1 优化 ImageUpload 组件
- 添加文件类型前端校验
- 添加文件大小前端校验
- 优化上传失败的错误提示
- 位置:
admin-web/src/components/ImageUpload/index.vue - Requirements: 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7
- 7.1 优化 ImageUpload 组件
-
8. 业务页面改造 - 商品管理
-
8.1 改造 GoodsAddDialog.vue
- 将 imgUrl 输入改为 ImageUpload 组件
- 将 imgUrlDetail 输入改为 ImageUpload 组件
- 删除原有的 image-upload-wrapper 样式
- Requirements: 6.1, 6.2, 6.3
-
8.2 改造 GoodsEditDialog.vue
- 将 imgUrl 输入改为 ImageUpload 组件
- 将 imgUrlDetail 输入改为 ImageUpload 组件
- 删除原有的 image-upload-wrapper 样式
- Requirements: 6.1, 6.2, 6.3
-
8.3 改造 PrizeAddDialog.vue
- 将 imgUrl 输入改为 ImageUpload 组件
- 将 imgUrlDetail 输入改为 ImageUpload 组件
- Requirements: 6.1, 6.2, 6.3
-
8.4 改造 PrizeEditDialog.vue
- 将 imgUrl 输入改为 ImageUpload 组件
- 将 imgUrlDetail 输入改为 ImageUpload 组件
- Requirements: 6.1, 6.2, 6.3
-
-
9. 业务页面改造 - 钻石充值
- 9.1 改造 DiamondFormDialog.vue
- 将 normalImage 输入改为 ImageUpload 组件
- 将 normalSelectImage 输入改为 ImageUpload 组件
- 将 firstChargeImage 输入改为 ImageUpload 组件
- 将 firstSelectChargeImage 输入改为 ImageUpload 组件
- Requirements: 6.1, 6.2, 6.3
- 9.1 改造 DiamondFormDialog.vue
-
10. 业务页面改造 - 内容辅助模块
-
10.1 改造 FloatBallFormDialog.vue
- 将 image 输入改为 ImageUpload 组件
- 将 imageBj 输入改为 ImageUpload 组件
- 将 imageDetails 输入改为 ImageUpload 组件
- Requirements: 6.1, 6.2, 6.3
-
10.2 改造 AdvertFormDialog.vue
- 将 imageUrl 输入改为 ImageUpload 组件
- Requirements: 6.1, 6.2, 6.3
-
10.3 改造 WelfareHouseFormDialog.vue
- 将 image 输入改为 ImageUpload 组件
- Requirements: 6.1, 6.2, 6.3
-
-
11. 业务页面改造 - 系统配置
-
11.1 改造 SignConfigFormDialog.vue
- 将 icon 输入改为 ImageUpload 组件
- Requirements: 6.1, 6.2, 6.3
-
11.2 改造 base.vue (基础配置)
- 将 erweima 输入改为 ImageUpload 组件
- 将 share_image 输入改为 ImageUpload 组件
- Requirements: 6.1, 6.2, 6.3
-
-
12. Final Checkpoint - 完整功能验证
- 确保所有改造的页面正常工作
- 验证图片上传、预览、删除功能
- 验证已有图片URL数据能正常显示
- 如有问题请询问用户
Notes
- 所有任务均为必需，包括测试任务
- 后端使用策略模式，方便后续扩展其他存储提供者（如阿里云OSS）
- 前端 ImageUpload 组件已创建基础版本，需要根据后端接口进行优化
- 业务页面改造时需保持原有表单验证逻辑不变