43 lines
1.9 KiB
Markdown
43 lines
1.9 KiB
Markdown
# 06 - 文件传输（拖拽 / 分片 / 进度 / 下载）
|
||
|
||
## 功能目标
|
||
- 支持拖拽上传、粘贴文件、发送文件元数据与分片内容。
|
||
- 接收端显示进度并可下载（本地重组 Blob）。
|
||
|
||
## 前端（Vue）
|
||
- **入口组件**
|
||
- `FileDropZone.vue`：拖拽、粘贴；触发 `file-selected` 事件。
|
||
- **分片与发送**
|
||
- `fileChunker.js`：按 `chunkSize` 切片（文档示例：64KB）。
|
||
- 发送流程：
|
||
1. 生成 `fileId`
|
||
2. 发送 `FILE` 元数据到 `/app/room/{roomCode}/message`
|
||
3. 循环发送 `CHUNK` 到 `/app/room/{roomCode}/file/chunk`
|
||
- **进度显示（建议）**
|
||
- 发送端：`sentChunks / totalChunks`
|
||
- 接收端：`receivedChunks / totalChunks`
|
||
- 通过消息列表中的文件卡片展示（进度条 + 状态：接收中/完成/失败）。
|
||
- **接收与下载（建议实现方式）**
|
||
- 建立 `fileId -> { meta, chunks[] }` 缓存
|
||
- 收到所有分片后，按顺序拼接为 `Uint8Array`/Blob
|
||
- 使用 `URL.createObjectURL(blob)` 生成下载链接
|
||
|
||
## 后端（Spring Boot）
|
||
- **转发策略**
|
||
- 元数据：作为 `FILE` 消息广播到房间 topic。
|
||
- 分片：作为 `CHUNK` 消息转发（可用独立 topic 或统一 topic）。
|
||
- **限制与风控（建议）**
|
||
- 单文件最大值（默认 100MB，可配置）。
|
||
- 分片大小（默认 64KB，可配置）。
|
||
- 频率限制（防止刷分片）。
|
||
|
||
## 协议与数据
|
||
- `FILE.payload`：`fileId/fileName/fileSize/mimeType/totalChunks`
|
||
- `CHUNK.payload`：`fileId/chunkIndex/data(base64)`
|
||
|
||
## 边界与注意点
|
||
- **Base64 膨胀**：Base64 会增加体积（约 33%），大文件会更慢；如需优化可改二进制 WebSocket（后续增强）。
|
||
- **并行多文件**：以 `fileId` 隔离缓存即可并行；UI 需支持多文件卡片。
|
||
- **断线续传**：当前协议未定义续传（可选增强：chunk ack / 断点续传）。
|
||
|