astAPI和Vue实现文件分片上传+秒传+断点续传的完整思路

你是不是也遇到过，上传个几百M的安装包或者设计稿，眼瞅着进度条走到99%，然后……网络波动一下，啪，没了！又要从头再来？相信我，这种崩溃的感觉我太懂了。

最近刚好在弄文件上传的小工具，又把这块硬骨头啃了一遍。今天不聊虚的，就把我这次用 FastAPI 和 Vue 实现大文件分片上传的完整思路，还有踩过的坑，都倒出来给你听。

🎯 核心摘要：读完你能带走什么？

这篇文章不会给你扔一堆晦涩的概念就跑。我会用讲故事的方式，跟你讲明白：

👉 分片上传到底是怎么一回事儿，原理是啥。

👉 秒传和断点续传的核心逻辑（其实就隔一层窗户纸）。

👉 一份可以直接复制粘贴拿去用的 FastAPI 后端核心代码。

👉 一份 Vue3 前端的实现思路和关键代码片段。

🗺️ 主要内容脉络

1️⃣ 从一次抓狂的上传失败说起

2️⃣ 别再盯着进度条了：聊聊分片、哈希与秒传

3️⃣ 后端实战：FastAPI如何像收快递一样收文件

4️⃣ 前端实战：Vue里那把切文件的“菜刀”

5️⃣ 跑起来！以及那些年我踩过的坑

6️⃣ 结尾碎碎念

1️⃣ 从一次抓狂的上传失败说起

手机上传一段视频到电脑，“每次到一半就挂” 我一看日志， 413 Request Entity Too Large ，Nginx和FastAPI双双拦截。

调整配置大小限制？那是治标不治本，大文件上传慢、易失败是HTTP协议天生的短板。

这就是为啥我们需要 分片上传。

思路特简单：把大象放进冰箱要几步？不对，是把大文件切成小块，一块块传，最后在服务端拼起来。

2️⃣ 别再盯着进度条了：聊聊分片、哈希与秒传

好，咱们先来理顺几个核心概念，别急着写代码。

🔹 文件切片（Blob.slice）

浏览器里，我们可以用 file.slice() 方法，像切西瓜一样把一个 File 对象切成一个个 Blob 。比如设定每片5MB，一个100MB的文件就变成了20个小块。

🔹 文件哈希（Spark-MD5）

接下来重点来了！文件指纹，也就是MD5值。 这玩意儿是文件的唯一身份证号。你可能会问，为啥要算这个？

一是为了 秒传：后端一看，“哟，这个MD5我数据库里有啊，文件存着呢！” 直接告诉你“传完了”，用户体验瞬间起飞。
二是为了 校验：确保服务端拼起来的文件没缺胳膊少腿。

这里千万别学我当初偷懒，想着用 文件名+修改时间 来当唯一标识，结果用户把文件重命名一下，或者换个文件夹上传，后端就傻傻地又存了一份一模一样的垃圾数据。

🔹 断点续传

原理就是每次上传前，先拿MD5去问后端：“我这文件，哪些片你已经有了？”
后端返回一个数组，比如 [0, 1, 3] ，意思就是第0、1、3片传过了。前端直接跳过这些片，从第2片开始传。

是不是以为这样就完了？对，核心就这么简单！

3️⃣ 后端实战：FastAPI如何像收快递一样收文件

咱们后端用的是 Python 界的当红炸子鸡 FastAPI，它处理文件上传异步非阻塞，性能杠杠的。

📍 检查分片接口（实现秒传+断点续传）

再说个容易翻车的点： 临时文件夹的路径设计。
千万别把所有分片都扔一个文件夹里，文件多了系统查找速度会变慢。按 file_hash 的前两位或者直接建一个同名文件夹，是最稳妥的做法。