FastAPI 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，它处理文件上传异步非阻塞，性能杠杠的。 📍 检查分片接口（实现秒传+断点续传） @app.post("/upload/check") async def check_chunks(file_hash: str, total_chunks: int): # 1. 去数据库查这个hash file_record = await db.get_file_by_hash(file_hash) if file_record: # 如果存在完整文件记录，直接返回秒传信号 return {"status": "success", "code": 200, "data": {"uploaded": True}} # 2. 不存在，就去磁盘找临时分片文件夹 temp_dir = Path(f"temp/{file_hash}") uploaded_chunks = [] if temp_dir.exists(): for chunk_file in temp_dir.iterdir(): # 文件名约定为 chunk_index uploaded_chunks.append(int(chunk_file.stem)) return {"status": "success", "data": {"uploaded": False, "uploaded_chunks": uploaded_chunks}} 再说个容易翻车的点： 临时文件夹的路径设计。