Initial commit: DataTool backend, frontend and Docker
This commit is contained in:
29
docs/07-图片预览(Base64内联显示).md
Normal file
29
docs/07-图片预览(Base64内联显示).md
Normal file
@@ -0,0 +1,29 @@
|
||||
# 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 渲染。
|
||||
|
||||
Reference in New Issue
Block a user