跳到主要内容

OpenRouter 更新：添加联网搜索、附加图片与PDF文件上传

2025年6月26日 · 阅读需 5 分钟

OpenRouter 核心团队

本次更新为OpenRouter聊天界面实现的全面文件附件系统和增强的拖放功能。该实现提供了无缝的文件上传能力，具备智能模型兼容性检测和极佳的用户体验模式。

🚀 主要新增功能

1. 智能文件附件系统

模型模态检测：根据input_modalities数组自动检测模型能力
智能图标显示：根据模型支持情况显示相应的上传图标
文件类型验证：在上传前根据模型能力验证文件
预览系统：实时文件预览并显示元数据

2. 增强的拖放界面

全输入区域放置区：整个聊天输入区域均可接收文件拖放
视觉反馈：拖拽操作期间显示美观的上传指示覆盖层
智能文件类型检测：基于模型能力动态提示
错误预防：文件处理前进行预验证

3. 模型兼容性框架

动态UI适配：界面根据模型支持的模态动态调整
智能处理：为每个模型选择最优文件处理策略
用户引导：清晰说明支持的文件类型和限制

🎨 用户界面改进

动态图标系统

附件图标 (📎)：显示给支持文件的模型（处理所有文件类型）
图片图标 (🖼️)：仅显示给支持图片的模型
PDF图标 (📄)：显示给仅支持文本但能处理PDF的模型

文件预览系统

图片缩略图视觉预览
文件元数据显示（名称、大小、类型）
移除按钮用于单独管理文件
上传进度指示器
错误状态及清晰提示

🧠 智能模型检测逻辑

模态分类

仅文本：['text']
- UI：仅显示PDF图标
- 处理：pdf-text引擎（免费）
- 限制：不支持图片
文本+图片：['text', 'image']
- UI：显示图片和PDF图标
- 处理：PDF使用pdf-text，图片使用image_url
- 限制：无原生文件处理
文本+图片+文件：['text', 'image', 'file']
- UI：仅显示附件图标（处理所有类型）
- 处理：原生文件处理，支持mistral-ocr
- 能力：完整文件支持（包括OCR）

📊 文件支持

模型类型	图片	PDF	处理方式	费用
仅文本	❌	✅ (仅文本)	pdf-text	免费
文本+图片	✅	✅ (仅文本)	image_url + pdf-text	免费
文本+图片+文件	✅	✅ (完整文件)	native + mistral-ocr	输入Token + OCR 费用

🔄 用户体验流程

传统上传（点击方式）

用户点击相应图标（附件/图片/PDF）
文件选择器打开，并筛选文件类型
用户选择文件
文件进行验证和处理
预览显示并附带附件选项

增强上传（拖放方式）

用户将文件拖至聊天输入区域
视觉反馈激活，显示青色覆盖层
动态消息提示支持的文件类型
用户在突出显示区域释放文件
即时验证和处理
成功/错误反馈及文件预览

智能错误处理

不支持的文件类型：明确提示支持的格式
文件大小限制：具体说明大小限制
模型限制：提供模型能力指导
处理失败：显示详细的错误信息

🛡️ 安全与验证

客户端验证

根据MIME类型验证文件类型
强制执行文件大小限制
检查模型能力
基础恶意文件检测

处理安全性

使用Base64编码确保安全传输
限制文件大小以防止滥用
处理前验证文件类型
清理对象URL以释放内存

🚀 性能优化

高效状态管理

拖拽计数器防止嵌套元素闪烁
正确清理事件以避免内存泄漏
拖拽操作期间优化重新渲染
清理对象URL以释放文件预览资源

智能文件处理

延迟加载文件处理工具
高效的Base64转换
最小化对未更改文件的重复处理
优化的验证流程

📱 响应式设计

移动设备兼容性

支持触摸操作的拖放功能
响应式文件预览布局
针对小屏幕优化
易于访问的文件上传按钮

跨浏览器支持

使用现代拖放API
为旧版浏览器提供回退方案
跨平台样式一致
渐进增强策略

✅ 测试清单

核心功能

通过点击（附件/图片/PDF图标）上传文件
通过拖放上传文件
文件类型验证和错误处理
文件大小限制强制执行
模型能力检测
动态UI适配

视觉反馈

拖拽状态的激活/停用
覆盖层显示正确的样式
根据模型类型显示动态消息
生成并显示文件预览
错误状态可视化

边缘情况