时序图

文件上传时序图模板

浏览器、业务后端、对象存储三方的大文件直传时序图:申请上传凭证、分片上传、失败重试、合并分片、存储回调、保存文件记录。做网盘、附件上传、视频上传功能设计和评审时改成自己的系统,免费导出 PNG、SVG、Word、PPT。

对象存储业务后端浏览器对象存储业务后端浏览器loop[每个分片]opt[某个分片失败]用户选择文件计算文件指纹并切片申请上传 文件名 大小 指纹校验类型与大小初始化分片上传上传编号上传编号与临时凭证上传分片分片校验值重试该分片通知全部分片已上传合并分片文件地址保存文件记录上传完成显示文件用户
预览用的是「墨青」主题,打开编辑器后可以换

适用场景

设计网盘、附件、视频上传功能,或者评审「文件要不要经过业务服务器」时使用。图上画的是直传方案:后端只发凭证和记账,文件内容由浏览器直接传到对象存储,大文件不会压垮业务服务器。

怎么改成你的

  • 小文件不需要分片的,删掉 loop 和合并两段,改成一次上传。
  • 需要秒传的,在申请上传后加一个 alt:指纹已存在则直接返回文件地址。
  • 上传后要做转码或内容审核的,在保存记录后加一条发给队列的消息。

Mermaid 代码

file-upload-sequence.mmd
sequenceDiagram
    actor U as 用户
    participant W as 浏览器
    participant B as 业务后端
    participant O as 对象存储
    U->>W: 选择文件
    W->>W: 计算文件指纹并切片
    W->>B: 申请上传 文件名 大小 指纹
    B->>B: 校验类型与大小
    B->>O: 初始化分片上传
    O-->>B: 上传编号
    B-->>W: 上传编号与临时凭证
    loop 每个分片
        W->>O: 上传分片
        O-->>W: 分片校验值
    end
    opt 某个分片失败
        W->>O: 重试该分片
    end
    W->>B: 通知全部分片已上传
    B->>O: 合并分片
    O-->>B: 文件地址
    B->>B: 保存文件记录
    B-->>W: 上传完成
    W-->>U: 显示文件

让 AI 按这个结构生成一份

把下面这段发给豆包、DeepSeek、Kimi 或元宝,再把它的回复整段粘贴到编辑器,会自动识别其中的代码。

prompt.txt
请用 Mermaid 的 sequenceDiagram 语法画一张大文件分片直传时序图:参与者有用户、浏览器、业务后端、对象存储;浏览器计算文件指纹并切片,向后端申请上传,后端校验类型与大小并向对象存储初始化分片上传,返回上传编号与临时凭证;用 loop 表示逐个上传分片,用 opt 表示某个分片失败时重试;全部上传后通知后端合并分片,后端保存文件记录并返回上传完成。只输出 mermaid 代码块。

常见问题

loop 和 opt 有什么区别?

loop 表示重复执行,opt 表示可能发生也可能不发生的一段。两者都以 end 结束。

为什么不让文件经过业务后端?

经过后端会占用它的带宽和内存,大文件尤其明显。直传只让后端处理凭证和记录,压力小很多。

临时凭证的有效期怎么定?

按文件大小和网络情况估算,够用即可,不宜过长。具体做法以你使用的存储服务文档为准。

同类模板

全部模板

更新于 2026-11-11