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

07 - 图片预览（Base64 内联显示）

功能目标

• 在消息列表中对图片进行缩略图预览与放大查看。
• 支持通过“文件传输通道”或“图片专用消息”传输图片数据。

前端（Vue）

• 识别规则
  • mimeType 满足 image/* 时按图片渲染。
• 展示形态（建议）
  • 消息卡片中显示缩略图（限制最大宽高）。
  • 点击后弹窗预览（Element Plus el-dialog/el-image 预览）。
• 传输策略（两种可选）
  • 复用文件分片（推荐一致性）：图片走 FILE + CHUNK，接收端完成后生成 Blob 并预览。
  • 小图直发：当图片小于阈值（如 200KB）时发送 IMAGE，payload 直接携带 base64（需限制大小）。

后端（Spring Boot）

• 默认透传（与 FILE/CHUNK 一致）；在生产环境建议增加大小限制与频率限制。

协议与数据（建议）

• 若使用 IMAGE：
  • payload.data：base64（不带 dataURL 前缀或带前缀需约定）
  • payload.mimeType：如 image/png
  • payload.fileName：（可选）

边界与注意点

• 性能：图片 base64 可能导致消息体很大，优先走分片。
• 安全：只当作图片二进制展示，不执行任何脚本；避免把 payload 当 HTML 渲染。