quick-share/docs/07-图片预览（Base64内联显示）.md

07 - 图片预览（HTTP 传输与内联显示）

功能目标

• 在消息列表中对图片进行缩略图预览与放大查看。
• 图片与文件一致，统一走 HTTP 上传/下载，仅通过 WebSocket 广播 FILE 元数据（fileId、fileName、mimeType 等），避免 WebSocket 消息大小限制（如 200KB）与长传断连。

前端（Vue）

• 识别规则
  • mimeType 满足 image/* 时按图片渲染；消息类型为 FILE（或历史兼容的 IMAGE）。
• 展示形态
  • 消息卡片中显示缩略图（限制最大宽高）。
  • 点击后弹窗预览。
• 传输策略
  • 图片一律走 HTTP：与普通文件相同，使用 POST /api/room/{roomCode}/file/upload 上传，服务端落盘后广播一条 FILE 消息（含 storage: 'server'）；展示时使用 GET /api/room/{roomCode}/file/{fileId} 作为图片 src，无需 base64 或 WebSocket 传图。

后端（Spring Boot）

• 复用 RoomFileController 的上传/下载接口；与普通文件相同的大小与频率限制。

协议与数据

• 图片消息使用 FILE 类型，与文件一致：
  • type: 'FILE'，storage: 'server'，fileId、fileName、fileSize、mimeType（如 image/png）。
• 历史兼容：若存在旧版 IMAGE 类型且带 imageData（base64），前端仍可解析并显示。

边界与注意点

• 性能：大图不再经 WebSocket，无 200KB 限制，由 HTTP 与服务器磁盘承载。
• 安全：图片仅作二进制展示，不执行脚本；避免将 payload 当 HTML 渲染。