# 文件上传功能集成说明

## ✅ 已完成的修复

### 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. ✅ 收款账号凭证上传功能完整实现

用户现在可以：
- 正常使用提现功能
- 上传收款账号凭证图片
- 查看和管理已上传的图片
- 删除不需要的图片

系统功能完整，可以正常使用！