前端要给多模态Agent喂图，简直像给小孩喂饭——先挑好菜，再把碗端稳，别让他噎住。

先说说这玩意儿到底是个啥

多模态Agent不光会聊文字，还Nengkan图、听音。

所以前端的任务就是：把用户乱七八糟的图片整成模型Neng“吞得下”的干净输入。

哈哈，这事儿听起来轻松，真干起来可是一堆细节。

1️⃣ 文件格式大杂烩

用户上传的常见有 jpg、png、webp，偶尔还有 HEIC。

HEIC是iPhone的默认格式，浏览器大多数直接报错。

不对不对，我一般用动态 import 把 heic2any 按需加载，只在检测到 HEIC 时才转成 jpeg，省得把体积大的库全搬进来。

async function normalize {
  if .endsWith) {
    const { default: heic2any } = await import;
    const blob = await heic2any;
    return new File;
  }
  return file;
}

2️⃣ 尺寸压缩：别让模型喝大碗水

大图直接塞进去，模型可Neng直接拒绝，也会浪费带宽。

经验之谈：把Zui长边压到 1024px 左右，质量保持在 80% 左右。

下面这段代码我常用——先生成 bitmap 再画到 canvas，Zui后转成 blob：

async function compress {
  const bitmap = await createImageBitmap;
  let { width, height } = bitmap;
  if > maxEdge) {
    const ratio = maxEdge / Math.max;
    width = Math.round;
    height = Math.round;
  }
  const canvas = document.createElement;
  canvas.width = width;
  canvas.height = height;
  canvas.getContext.drawImage;
  return new Promise);
}

3️⃣ 自动旋转：别让猫变躺平的猫

hen多手机拍照会把方向写进 EXIF，但 Canvas 绘制时默认不理会。

createImageBitmap 带上 { imageOrientation: "from-image" } 参数，就Neng自动帮你摆正方向。

const bitmap = await createImageBitmap(file, {
  imageOrientation: "from-image"
});

4️⃣ 前端怎么传？URL vs Base64

小图Ke以直接转成 base64 放进 JSON 发给后端或直接给模型 API。

大图Zui好先上传到对象存储，然后把返回的 URL 给模型——省流量也省内存。

记得用 URL.createObjectURL 把压缩后的 blob 转成临时地址展示预览，加载完记得 .revokeObjectURL 防止泄漏。

const url = URL.createObjectURL;
img.src = url;
img.onload =  => URL.revokeObjectURL;

接入多模态Agent的坑点与技巧 #️⃣ 接口限额和尺寸上限

AIGC 大模型通常对单张图片大小有限制——比如 GPT‑4V Zui多只Neng接受 5 MB.

Curl 上传时Ru果超过了它会直接返回 "Payload Too Large".

P.S. 我们前端只需要在压缩阶段判断一下Ru果超过阈值就强制再压一次或者提示用户重新选择。

#️⃣ 并发上传与进度条

CORS 配置好以后用 fetch 的 {method:"POST",body:formData}.

CORS 错误Zui常见的原因是忘了在服务器加上 "Access-Control-Allow-Origin: *", 小伙伴们注意下呀！

#️⃣ 为什么百度不收录我的图片接口？🤔

*答案*: 百度爬虫默认不会执行 JavaScript，也不会主动调用你的 API 去抓取图片内容。除非你提供静态页面里直接可访问的 img 链接，否则它根本kan不到你的图片。再者，Ru果你用了 CDN 且没有在 robots.txt 中放行对应路径，同样会被屏蔽。解决办法就是：

在公开页面中嵌入真实的 链接；

确保该路径没有被 robots.txt 拦截；

给图片加上合理的 alt 文本，让搜索引擎Neng理解上下文；

Ru果是 API 返回 JSON 包含图片 URL，也Ke以通过 Sitemap 主动告知百度。

实战：一步步把「拍张图」功Neng上线 🚀 #1 收集文件 & 初步校验

inputElement.addEventListener('change', async e => {
  const file = e.target.files;
  if  return;
  // 简单校验类型
  if /i.test) {
    alert;
    return;
  }
  // 大小限制
  if  {
    alert;
    return;
  }
   // 正式走流程
   const normalized = await normalize;
   const compressedBlob = await compress;
   sendToAgent;
});

#2 把压好的 Blob 发给后端/AI Service

async function sendToAgent {
   // 小于阈值直接 base64
   if  {
     const base64 = await blobToBase64;
     await fetch('/api/agent', {
       method:'POST',
       headers:{'Content-Type':'application/json'},
       body:JSON.stringify
     });
   } else {
     // 大文件走对象存储
     const uploadUrl = await getUploadUrl; // 后端签名
     await fetch;
     const publicUrl = uploadUrl.split;
     await fetch('/api/agent', {
       method:'POST',
       headers:{'Content-Type':'application/json'},
       body:JSON.stringify
     });
   }
}

#3 前端展示返回结果 & 错误处理

async function handleResponse {
   if  {
      console.error;
      alert;
      return;
   }
   const data = await res.json;
   // 假设返回的是文本+标注框坐标
   renderAnswer;
   drawBoxes;
}

S​mall Tips 集锦

开发环境下打开 Chrome DevTools → Network → Disable cache，这样每次douNengkan到真实请求体大小；

别忘了在 Service Worker 中排除图片上传请求，否则离线模式会莫名其妙拦截；

Ru果项目里Yi经有统一的请求封装，把「图片转 base64」这块抽成工具函数，多处复用；

调试多模态模型时用 Postman 手动发一次带 URL 的请求，比前端geng快定位是前端还是后端的问题。

有时候模型提示词里要加「请忽略背景噪声」，否则它可Neng把天上的云当作关键元素。

别忘了给用户一个「重新拍摄」按钮，hen多时候光线不好导致识别率低，下次再来就好了。

—— 前端真的hen重要！💪🏻

咱们以前只负责页面渲染，现在Yi经变成 AI 感官入口的守门员。

P.S. 别以为只要写好前端就完事了后面的模型调参、Prompt 优化同样重要，不过那是另一篇故事啦。

end.

---