用 Vue3 + Coze 工作流打造「宠物变冰球运动员」AI 应用 —— 从上传到生成全流程实战
一句话简介：用户上传一张宠物照片，选择队服颜色、号码、位置等参数，AI 自动生成一张“穿冰球服的宠物”图片，并实时展示——这一切，仅靠前端 + Coze API 就能实现！
前言：为什么做这个项目？
在 AIGC（AI 生成内容）爆发的今天，普通人也能通过低代码平台快速构建 AI 应用。
Coze 作为字节推出的智能体开发平台，提供了强大的 工作流（Workflow）能力，允许我们将图像理解、提示词工程、Stable Diffusion 等能力封装成一个 API。
于是，我突发奇想：能不能让我的猫穿上冰球服？
于是就有了这个小而美的项目——IceBall AI：上传任意宠物/人像照片，AI 自动将其“换装”为冰球运动员形象，支持自定义队服颜色、号码、持杆手、风格等，结果可直接分享朋友圈！
本文将带你从 0 到 1 拆解这个应用的前端实现，重点讲解：
如何用 Vue3 实现图片预览 如何调用 Coze 文件上传接口 如何安全传递 file_id 给工作流 如何解析并展示生成的图片 URL最后还会附上 大厂高频面试题，助你举一反三！
Coze 工作流做了什么？
在深入代码前，先理解后端逻辑：
✅ 工作流设计（在 Coze 平台配置）
输入参数：
picture：文件 ID（由前端上传后返回） style：生成风格（如“乐高”、“油画”） uniform_color / uniform_number / position / shooting_hand：业务参数内部流程：
使用 图像理解 Bot 分析原始图中主体（宠物/人）
构造动态提示词（Prompt），例如：
“一只穿着红色冰球服、号码10、左手持杆的猫咪，站在冰球场上，写实风格”
调用 文生图模型（如 SDXL）生成新图
输出：
返回生成图片的 临时 URL，格式为：
{ "answer": "https://s.coze.cn/t/xxx" }
关键点：前端只需上传文件 → 获取 file_id → 调用 workflow → 展示 answer，无需关心 AI 内部细节。
️ Template：简洁直观的交互界面
```
设计亮点：
响应式布局：左右分栏，适配桌面端 即时反馈：上传即显示预览图，提升用户体验 状态驱动：status 控制“上传中”、“生成中”等文案 条件渲染：v-if="imgUrl" 避免空图占位⚙️ Script Setup：Vue3 Composition API 核心逻辑
我们使用 <script setup> 语法，代码更简洁、逻辑更聚焦。
1️⃣ 响应式状态管理
js 编辑 const uniform_number = ref(10); const uniform_color = ref('红'); // ... 其他表单项 const status = ref(''); // 操作状态 const imgUrl = ref(''); // 生成图 URL const imgPreview = ref(''); // 本地预览图（base64） const uploadImage = ref(null); // DOM 引用
✅ 所有 UI 状态均由 ref 管理，自动触发视图更新。
2️⃣ 图片预览：FileReader + Base64
const updateImageData = () => { const file = uploadImage.value.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (e) => { imgPreview.value = e.target.result; // base64 字符串 }; }; 原理：FileReader.readAsDataURL() 将文件转为 data:image/jpeg;base64,... 格式 优势：无需上传即可本地预览，用户体验流畅
3️⃣ 上传文件到 Coze
js 编辑 const uploadFile = async () => { const formData = new FormData(); formData.append('file', uploadImage.value.files[0]); const res = await fetch(uploadUrl, { method: 'POST', headers: { Authorization: `Bearer ${patToken}` }, body: formData }); const ret = await res.json(); if (ret.code !== 0) { status.value = ret.msg; return; } return ret.data.id; // 关键！返回 file_id };
安全提示：使用 .env 存储 VITE_PAT_TOKEN，避免泄露 PAT（Personal Access Token）
4️⃣ 调用 Coze 工作流（核心！）
js 编辑 const generate = async () => { status.value = "图片上传中..."; const file_id = await uploadFile(); if (!file_id) return; status.value = "正在生成中..."; const parameters = { picture: JSON.stringify({ file_id }), // Coze 要求传 JSON 字符串 style: style.value, uniform_color: uniform_color.value, // ... 其他参数 }; const res = await fetch(workflowUrl, { method: 'POST', headers: { Authorization: `Bearer ${patToken}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ workflow_id: workflowId, parameters }) }); const ret = await res.json(); if (ret.code !== 0) { status.value = ret.msg; return; } // ✅ 正确解析：ret.answer 就是图片 URL！ imgUrl.value = ret.answer; status.value = ''; };
⚠️ 重点纠正一个误区！
很多同学会写：
imgUrl.value = ret.answer;
但根据你 console.log(ret) 的实际输出：
console.log(ret);
→ ret.data里面的数据还没有反序列化
所以正确做法是：
const data=JSON.parse(ret.data); imgUrl.value = data.answer; // 直接取！
经验法则：先检查 console.log(ret)，再决定如何取值！
项目亮点总结
功能技术实现本地图片预览FileReader + readAsDataURL安全上传FormData + Bearer Token参数传递将 file_id 封装为 JSON 字符串状态管理ref + 条件渲染错误处理检查 ret.code !== 0大厂面试题延伸
Q：为什么上传文件要用 FormData，而不是直接 JSON.stringify(file)？
A：因为文件是二进制数据，FormData 支持 multipart/form-data 编码，可携带二进制流；而 JSON 只能传字符串。
Q：FileReader.readAsDataURL() 的原理是什么？有什么缺点？
A：它将文件读取为 Base64 字符串，优点是可直接用于 <img src>；缺点是体积膨胀约 33%，且大文件会阻塞主线程。
Q：如何防止 PAT Token 泄露？
A：前端无法完全隐藏 Token，因此应：
Q：Coze 返回的图片 URL 有效期多久？如何长期保存？
A：临时链接通常 10~30 分钟失效。如需持久化，应在前端或后端下载图片并存储到 OSS。
结语
这个小项目虽简单，却完整覆盖了 现代 Web AI 应用的核心链路：
用户交互 → 数据上传 → AI 调用 → 结果展示。
借助 Coze 这样的平台，前端工程师也能轻松集成强大 AI 能力，不再只是“切图仔”。
GitHub 开源地址：欢迎 Star！（可自行补充）
在线体验：部署后可提供 demo 链接
希望这篇文章对你有启发！如果你也有有趣的 AI 小应用，欢迎在评论区分享
作者：饶世豪 标签：#Vue3 #Coze #AIGC #前端工程化 #低代码AI
相关知识
用 Vue3 + Coze 工作流打造「宠物变冰球运动员」AI 应用 —— 从上传到生成全流程实战
挑战用coze图像流制作宠物AI写真“猫猫守护神”（附详细操作教程）
挑战用coze图像流制作宠物AI写真“猫猫守护神”
有人靠它月入10W+？挑战用coze图像流制作宠物AI写真“猫猫守护神”（附详细操作教程）
极光GPTBots.ai 亮相“智联全球”AI出海峰会，以智能工作流打破企业AI应用落地壁垒
AI宠物模特
Coze/Dify/FastGPT/N8N ：该如何选择Agent平台？
挑战用coze图像流制作宠物AI写真“猫猫守护神”（附详细操作教程）月入月入10W+？
comfyUI制作猫咪守护神写真工作流，打造你的专属猫咪守护神，创意与收入的双重收获
基于Spring Boot + Vue3 + Uni
网址: 用 Vue3 + Coze 工作流打造「宠物变冰球运动员」AI 应用 —— 从上传到生成全流程实战 https://m.mcbbbk.com/newsview1336733.html
| 上一篇: [附源码]Node.js计算机毕 |
下一篇: 狗狗焦虫症的治疗方法——以鸡肝为 |
