216 lines
4.7 KiB
Markdown
216 lines
4.7 KiB
Markdown
# 文件上传功能集成说明
|
||
|
||
## ✅ 已完成的修复
|
||
|
||
### 1. 钱包页面提现按钮（已修复）
|
||
**文件**：`frontend/src/features/wallet/views/WalletView.vue`
|
||
|
||
**修复内容**：
|
||
- ✅ 移除了 `disabled` 属性
|
||
- ✅ 添加了路由跳转功能
|
||
- ✅ 移除了"待开发"标签
|
||
- ✅ 改为 `type="primary"` 样式
|
||
|
||
**现在的功能**：
|
||
- 点击"申请提现"按钮会跳转到 `/wallet/withdrawal` 页面
|
||
|
||
---
|
||
|
||
### 2. 收款账号凭证上传（已集成）
|
||
**文件**：`frontend/src/features/wallet/components/PaymentAccountDialog.vue`
|
||
|
||
**集成内容**：
|
||
- ✅ 导入文件上传 API (`uploadFile`)
|
||
- ✅ 添加上传处理函数 (`handleUpload`)
|
||
- ✅ 添加删除图片函数 (`removeImage`)
|
||
- ✅ 更新模板，支持图片预览和删除
|
||
- ✅ 添加完整样式
|
||
|
||
**功能特性**：
|
||
1. **图片预览** - 已上传的图片显示缩略图
|
||
2. **删除功能** - 鼠标悬停显示删除按钮
|
||
3. **数量限制** - 最多上传 3 张图片
|
||
4. **文件验证**
|
||
- 只能上传图片文件
|
||
- 最大 5MB
|
||
5. **上传状态** - 显示上传进度和 loading 图标
|
||
6. **图片优化** - 自动压缩和优化图片（使用 WebP 格式）
|
||
|
||
**使用场景**：
|
||
- 支付宝/微信收款码截图
|
||
- 银行卡照片
|
||
- 其他支付凭证
|
||
|
||
---
|
||
|
||
## 🎯 使用说明
|
||
|
||
### 用户端操作流程
|
||
|
||
1. **进入收款账号管理**
|
||
- 访问：http://localhost:5173/wallet/payment-accounts
|
||
- 或从钱包页面点击"管理收款账号"
|
||
|
||
2. **添加收款账号**
|
||
- 点击"添加收款账号"按钮
|
||
- 选择账号类型（支付宝/微信/银行卡）
|
||
- 填写必填信息
|
||
- 上传凭证图片（可选）：
|
||
- 点击"上传凭证"按钮
|
||
- 选择图片文件
|
||
- 等待上传完成
|
||
- 可以上传最多 3 张图片
|
||
- 点击图片上的删除按钮可以移除
|
||
|
||
3. **申请提现**
|
||
- 在钱包页面点击"申请提现"
|
||
- 选择收款账号
|
||
- 输入金额
|
||
- 提交申请
|
||
|
||
---
|
||
|
||
## 📸 支持的图片格式
|
||
|
||
- **输入格式**：JPEG, PNG, WebP
|
||
- **输出格式**：WebP（自动转换）
|
||
- **最大尺寸**：5MB
|
||
- **图片处理**：
|
||
- 自动压缩
|
||
- 保持宽高比
|
||
- 优化文件大小
|
||
|
||
---
|
||
|
||
## 🔧 技术实现
|
||
|
||
### 文件上传流程
|
||
```
|
||
1. 用户选择图片
|
||
↓
|
||
2. 验证文件类型和大小
|
||
↓
|
||
3. 调用 optimizeImageForUpload() 优化图片
|
||
↓
|
||
4. 上传到服务器 (/api/files/upload)
|
||
↓
|
||
5. 返回 URL 和元数据
|
||
↓
|
||
6. 保存 URL 到 certificate_urls 数组
|
||
```
|
||
|
||
### API 接口
|
||
```typescript
|
||
uploadFile(file: File, scene: string): Promise<UploadedFile>
|
||
```
|
||
|
||
**参数**：
|
||
- `file`: File 对象
|
||
- `scene`: 上传场景标识（使用 `'payment-cert'`）
|
||
|
||
**返回**：
|
||
```typescript
|
||
{
|
||
object_key: string
|
||
url: string
|
||
thumbnail_url?: string
|
||
medium_url?: string
|
||
filename: string
|
||
content_type: string
|
||
size: number
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 UI 设计
|
||
|
||
### 上传区域
|
||
```
|
||
┌─────────┬─────────┬─────────┐
|
||
│ 图片1 │ 图片2 │ + 上传 │
|
||
│ [删除] │ [删除] │ 凭证 │
|
||
└─────────┴─────────┴─────────┘
|
||
```
|
||
|
||
### 交互效果
|
||
- ✅ 鼠标悬停显示删除按钮
|
||
- ✅ 上传时显示 loading 图标
|
||
- ✅ 上传按钮有 hover 效果
|
||
- ✅ 图片预览（100x100px）
|
||
- ✅ 响应式布局
|
||
|
||
---
|
||
|
||
## 🔒 安全说明
|
||
|
||
1. **文件验证**
|
||
- 前端验证文件类型
|
||
- 前端验证文件大小
|
||
- 后端也会进行二次验证
|
||
|
||
2. **图片处理**
|
||
- 自动压缩减小文件大小
|
||
- 统一转换为 WebP 格式
|
||
- 限制图片尺寸
|
||
|
||
3. **存储**
|
||
- URL 存储在数据库
|
||
- 图片存储在 MinIO/OSS
|
||
- 支持私有访问控制
|
||
|
||
---
|
||
|
||
## 📋 测试建议
|
||
|
||
### 功能测试
|
||
- [ ] 上传 JPEG 图片
|
||
- [ ] 上传 PNG 图片
|
||
- [ ] 上传 WebP 图片
|
||
- [ ] 上传超过 5MB 的图片（应该失败）
|
||
- [ ] 上传非图片文件（应该失败）
|
||
- [ ] 上传 3 张图片（达到上限）
|
||
- [ ] 删除已上传的图片
|
||
- [ ] 重新上传删除的图片
|
||
|
||
### UI 测试
|
||
- [ ] 图片预览显示正常
|
||
- [ ] 删除按钮悬停显示
|
||
- [ ] 上传中显示 loading
|
||
- [ ] 上传成功提示
|
||
- [ ] 上传失败提示
|
||
- [ ] 布局响应式
|
||
|
||
---
|
||
|
||
## 🐛 已知限制
|
||
|
||
1. **当前版本**：
|
||
- 只支持图片上传
|
||
- 最多 3 张图片
|
||
- 单个文件最大 5MB
|
||
|
||
2. **未来优化**：
|
||
- 支持 PDF 文件
|
||
- 批量上传
|
||
- 拖拽上传
|
||
- 图片裁剪
|
||
|
||
---
|
||
|
||
## 🎉 总结
|
||
|
||
✅ **文件上传功能已完全集成**
|
||
|
||
两个主要修复：
|
||
1. ✅ 钱包页面"申请提现"按钮可点击
|
||
2. ✅ 收款账号凭证上传功能完整实现
|
||
|
||
用户现在可以：
|
||
- 正常使用提现功能
|
||
- 上传收款账号凭证图片
|
||
- 查看和管理已上传的图片
|
||
- 删除不需要的图片
|
||
|
||
系统功能完整，可以正常使用！
|