30 lines
1.3 KiB
Markdown
30 lines
1.3 KiB
Markdown
# 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 渲染。
|
||
|