AI Native 面试题库

2026-04-29

Question

你在做一个 AI 对话产品，后端是一个支持多模态输入（文字 + 图片）的大模型接口。请描述：如何在前端实现"图片上传 + 图文混合问答"功能？

包括：

  1. 图片上传的方式（直传 OSS？走后端中转？）及你如何做选择
  2. 图片如何和文字一起构成请求体发送给大模型后端
  3. 图片的预览、压缩或格式限制你会如何处理
  4. 有哪些边界情况或体验细节你会特别注意

Your Answer

把图片上传到对象存储获得 URL，然后把图片放到文本中以 Markdown 格式嵌入。对象存储通常支持图片多版本，在对话流中使用轻量级版本的 URL；如果大模型有返回图片，也同样先上传到对象存储，随着对话流输出小体积的 Markdown 格式 URL。前端展示时，图片被点击放大则展示更高质量的版本。

Review

优点：

  • 图片走 OSS + URL 的方向正确，避免了 base64 臃肿传输
  • 多分辨率思路（轻量版展示 + 点击高清）是体验层的有效优化，面试中能讲出来加分
  • 对 AI 返回图片的处理也纳入了思考范围

不足：

  • 核心盲点：把"Markdown 格式"用于发送给大模型的请求体是错误的。多模态 LLM API（OpenAI、Claude、Gemini）接收图片的方式是结构化的 content 数组，文字和图片是并列字段，而非混在一个字符串里
  • 未涉及 OSS 直传的安全考量（需后端签发临时凭证）
  • 未提及上传时机的选择和图片格式/大小限制

Improved Answer

1. 图片上传方式

推荐直传 OSS：由后端签发临时上传凭证（STS Token / 预签名 URL），前端直接上传到 OSS，拿回图片 URL。这样可以：

  • 避免图片经过后端服务器增加带宽压力
  • 避免把 AccessKey 暴露在前端代码中

上传时机建议"选完图即上传"，让用户发送消息时 URL 已就绪，避免发送卡顿。

2. 图片如何和文字一起发给大模型

多模态 LLM API 的 message 格式是结构化数组，而非 Markdown 字符串：

{
  "role": "user",
  "content": [
    { "type": "text", "text": "这张图里有什么？" },
    { "type": "image_url", "image_url": { "url": "https://..." } }
  ]
}

前端需要将文字输入和图片 URL 分别构造成 content 数组的元素，再发给后端。

3. 图片预览与格式处理

  • 客户端预检：校验格式（JPEG/PNG/WebP）和大小（如 GPT-4V 限制 20MB），不符合则提示用户
  • 压缩：超大图片在上传前用 Canvas 压缩到合理尺寸
  • 展示：对话界面中显示轻量缩略图（OSS 图片处理参数），点击放大加载原图/高清版

4. 体验细节

  • 上传进度：图片较大时展示进度条，避免用户以为卡死
  • 上传失败重试：网络不稳定时自动重试，失败后给予明确提示
  • 多图支持：如果模型支持多图，需要管理已选图片列表并支持删除单张
  • 对话历史中的图片：缩略图版本避免长列表加载卡顿
ON THIS PAGE