28 lines
1.6 KiB
Markdown
28 lines
1.6 KiB
Markdown
# 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 渲染。
|
||
|