️ 主要内容脉络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(ftemp/{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}}再说个容易翻车的点临时文件夹的路径设计。千万别把所有分片都扔一个文件夹里文件多了系统查找速度会变慢。按 file_hash 的前两位或者直接建一个同名文件夹是最稳妥的做法。 上传分片接口app.post(/upload/chunk) async def upload_chunk( file: UploadFile File(...), file_hash: str Form(...), chunk_index: int Form(...), ): temp_dir Path(ftemp/{file_hash}) temp_dir.mkdir(exist_okTrue) chunk_path temp_dir / str(chunk_index) # 把上传的分片内容异步写入磁盘 with open(chunk_path, wb) as f: while content : await file.read(1024 * 1024): # 1MB一读 f.write(content) return {status: success, chunk_index: chunk_index} 合并分片接口app.post(/upload/merge) async def merge_chunks(file_hash: str, file_name: str, total_chunks: int): temp_dir Path(ftemp/{file_hash}) target_path Path(fuploads/{file_hash}_{file_name}) # 注意要按照分片索引顺序写入 with open(target_path, wb) as target_f: for i in range(total_chunks): chunk_path temp_dir / str(i) with open(chunk_path, rb) as chunk_f: target_f.write(chunk_f.read()) # 清理临时分片和文件夹这里可以用 shutil.rmtree # 校验MD5是否一致... # 写入数据库记录... return {status: success, code: 200}4️⃣ 前端实战Vue里那把切文件的“菜刀”前端我用的是 Vue3 Element Plus 核心库是 spark-md5 。 第一步切肉不对切文件并计算Hash计算大文件的MD5是个CPU密集型任务如果直接卡在主线程页面会直接假死。官方文档虽然建议用 Worker但根据以往的经验不用 Worker 而是用 requestIdleCallback 或者分片读取计算对小几G的文件来说体验也是OK的代码还少。// 伪代码示例思路最重要 const CHUNK_SIZE 5 * 1024 * 1024; // 5MB一片 async function handleUpload(file) { const chunks createChunks(file); // 计算Hash (这里略去具体SparkMD5的增量计算代码否则太长了) const fileHash await computeHash(chunks); // 1. 检查是否秒传或需要断点续传 const { uploaded, uploadedChunks } await checkChunksApi(fileHash, chunks.length); if (uploaded) { ElMessage.success(文件秒传成功); return; } // 2. 过滤出未上传的分片 const pendingChunks chunks.filter((_, index) !uploadedChunks.includes(index)); // 3. 并发上传 (千万别同时全发出去要控制并发数比如一次最多6个) await uploadChunksWithPool(pendingChunks, fileHash, 6); // 4. 通知后端合并 await mergeChunksApi(fileHash, file.name, chunks.length); ElMessage.success(总算传完了合并成功); }这个工具的选择好比选螺丝刀不是最贵的最好而是最顺手的。这里用 spark-md5 完全够用别为了高大上去引入一整套 crypto-js太重了。5️⃣ 跑起来以及那些年我踩过的坑⚠️坑一分片大小怎么定别设太小比如100KB那样请求数爆炸浏览器并发扛不住后端压力也大。也别太大失去断点续传的意义。个人经验 5MB 或 10MB 是个很舒服的区间。⚠️坑二合并文件时的顺序后端合并分片时千万注意要按照 chunk_index 从小到大写入。如果你用了 os.listdir() 然后直接遍历系统返回的顺序可能是乱的拼出来的文件就坏了。我就这么坏过一个3个G的模型包血泪教训啊⚠️坑三并发上传控制浏览器对同一域名的并发连接数是有限制的HTTP/1.1一般是6个。如果你 for 循环里直接发几百个请求后面的请求全得排