Vue3 项目：宠物照片变身冰球运动员的 AI 应用

这是一个有趣的 AI 图像生成应用，使用 Vue 3 构建前端，用户上传宠物（或任何）照片，选择冰球运动员的队服颜色、编号、位置、持杆手和风格，然后调用 Coze 平台的 AI 工作流生成一张宠物穿冰球装备的趣味图像。

整个业务逻辑清晰、模块化，主要分为图片预览 、参数配置 、文件上传 和AI 生成四个核心部分。

1. 应用整体流程

用户选择本地图片文件。
前端立即预览图片（提升用户体验，避免上传等待时感到空白）。
用户配置冰球运动员参数（队服颜色、编号、位置、持杆、风格）。
点击"生成"按钮：
- 先将图片上传到 Coze 服务器，获取文件 ID（file_id）。
- 然后调用 Coze 工作流 API，传入 file_id 和其他参数。
- Coze 工作流内部使用 AI 模型（可能是图像融合或文生图变体）生成新图片。
- 返回生成的图片 URL，前端显示。
过程中通过状态文本提示用户进度（上传中 → 生成中 → 成功/失败）。

2. 图片预览模块：本地即时预览

为什么需要预览？

图片上传可能需要时间（尤其是大文件），即时预览让用户知道"操作已生效"，提升体验。同时避免用户误以为卡顿。
实现原理：
- 使用 HTML <input type="file"> 监听 @change 事件。
- 获取选中的文件后，使用浏览器内置的 FileReader API 将文件读取为 Base64 编码的 Data URL（字符串形式）。
- 将这个字符串赋值给响应式变量 imgPreview，绑定到 <img :src="imgPreview"> 上即可显示。

关键代码逻辑：

js 复制代码

const updateImageData = () => {
  const file = uploadImage.value.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file);  // 异步读取
  reader.onload = (e) => {
    imgPreview.value = e.target.result;  // Base64 字符串，直接作为 src
  };
};

优点：纯前端操作，无需上传服务器，速度快。

3. 参数配置：响应式表单数据

使用 Vue 3 的 ref 定义响应式变量：
- uniform_number（编号，默认 7）
- uniform_color（颜色，默认 "白"）
- position（位置：0-守门员、1-前锋、2-后卫）
- shooting_hand（持杆：0-左手、1-右手）
- style（风格：写实、乐高、国漫等）
通过 v-model 双向绑定到表单控件，用户修改即时更新这些变量。
这些参数后续会作为工作流输入，直接影响 AI 生成的图像效果。

4. 文件上传到 Coze：获取 file_id

为什么先上传文件？

Coze 工作流不支持直接接收文件字节流，而是需要一个文件 ID（file_id）。Coze 会自动将 file_id 转换为内部可访问的 URL 供 AI 使用。
API 详情：
- 端点：https://api.coze.cn/v1/files/upload
- 方法：POST
- Headers：Authorization: Bearer <PAT_TOKEN>
- Body：FormData，键为 file，值为文件对象
- 成功响应：{ code: 0, data: { id: "文件ID" } }
实现逻辑：
- 创建 FormData，append 用户选择的文件。
- 使用 fetch 发送请求。
- 检查 code === 0，返回 file_id，否则显示错误消息。
状态更新 ：上传前设置 status = "图片上传中..."，成功后更新为"上传成功，正在生成中..."。

5. 调用 Coze 工作流：生成图像

API 详情 ：
- 端点：https://api.coze.cn/v1/workflow/run
- 方法：POST
- Headers：
  - Authorization: Bearer <PAT_TOKEN>
  - Content-Type: application/json
- Body：
  json 复制代码
```
{
  "workflow_id": "固定工作流 ID",
  "parameters": {
    "picture": "{\"file_id\": \"上传得到的ID\"}",
    "style": "用户选择的风格",
    "position": ...,
    // 其他参数
  }
}
```
- 注意：图片参数必须是 JSON 字符串化的对象 { "file_id": "xxx" }，Coze 会自动解析为文件 URL。
响应处理 ：
- 成功：ret.code === 0，ret.data 是字符串（工作流输出），需 JSON.parse(ret.data) 获取实际数据，通常包含生成的图像 URL（如 data.data）。
- 设置 imgUrl.value = imageUrl，前端显示新图片。
- 更新状态为"生成成功"或错误消息。
安全与配置 ：
- PAT Token（Personal Access Token）通过环境变量 VITE_PAT_TOKEN 注入，避免硬编码。
- 工作流 ID 固定硬编码（实际项目可配置化）。

6. 用户体验优化点

状态提示 ：status 变量实时反馈进度和错误。
错误处理 ：统一检查 API 的 code 字段，非 0 时显示 msg。
布局：左侧输入区（上传 + 参数），右侧输出区（预览 + 生成结果），响应式友好。
扩展性：参数易增减，适合类似"宠物变身其他角色"的变体应用。

总结

这个项目巧妙结合了 Vue 3 的响应式系统、前端文件处理能力和 Coze 的 AI 工作流 API，实现了从上传到生成的完整闭环。