主题
React + AI 应用开发
React AI 多模态输入和文件上传如何设计？
多模态输入把文件生命周期、预览安全、模型能力、上传成本和消息一致性同时带进了 Chat。
面试官想考什么
- 大文件上传是否走 Chat 请求？ 考察链路设计。
- 预览 URL 会不会泄露文件？ 考察权限和生命周期。
- 图片压缩放在哪里做？ 考察体验、成本和隐私。
- 上传失败后如何重试？ 考察任务状态和幂等。
一句话回答
text
文件应先走独立的可断点上传流程，拿到受权限控制的 fileId 后再作为消息附件引用；前端管理选择、校验、预览、进度和取消，服务端负责真实类型检测、扫描、权限和模型适配，并限制尺寸、格式和成本。面试回答详解
1. 两阶段链路
text
选择文件 -> 本地初检/预览 -> 上传任务 -> 扫描/解析
-> fileId -> 发送消息引用 -> 模型或 RAG 处理不要把几十 MB 文件直接塞进对话 POST。上传和对话分离后，可以重试、复用、扫描和审计。
2. 前端状态
每个附件独立拥有 selected、uploading、processing、ready、failed、cancelled 状态。预览使用 object URL 时要在清理时 revoke；失败要保留用户可修正的原因和重试动作。
3. 安全和权限
扩展名、MIME 和大小是体验层初检，不是安全保证。服务端检测真实类型、病毒扫描、内容解析隔离、租户归属和下载权限。预览和下载使用短期授权 URL，过期或撤销后前端显示不可访问。
4. 成本与性能
图片可在本地做尺寸限制或压缩，但涉及隐私和画质时应让用户知道；超大 PDF 可异步解析并显示 processing。模型支持的 MIME、分辨率和 token 费用不同，前端应展示限制，服务端做最终裁剪和预算。
5. 消息一致性
发送消息时引用 fileId 和文件快照版本。文件被删除、重新扫描或权限变化后，历史消息仍要能表达“附件已不可访问”，不能 silently 换成另一个同名文件。
可直接背诵的 30 秒回答
text
我会把上传和对话拆成两阶段。前端维护每个文件的选择、预览、上传、扫描、失败和取消状态，服务端完成真实类型检测、病毒扫描、ACL 和模型适配，成功后返回 fileId。消息只引用 fileId 和版本，预览用短期授权 URL，超大文件异步处理，并对大小、格式和 token 成本设预算。扩展知识
data URL 与 object URL
data URL 会把内容编码进字符串，可能扩大内存和日志风险；object URL 更适合本地预览，但必须在不用时释放。
面试官追问链
追问一：是否应该在浏览器扫描病毒？
- 考察点：职责边界。
- 回答方向：浏览器初检可改善体验，但不能替代服务端扫描和隔离环境。
追问二：上传完成但发送消息失败怎么办？
- 考察点：资源与消息一致性。
- 回答方向：fileId 独立存在，可重试发送；后台清理长期未引用文件，避免孤儿资源。
追问三：如何支持断点续传？
- 考察点：大文件工程能力。
- 回答方向：分片、upload session、已完成分片查询、校验和、过期清理；最终用 fileId 原子提交。