你是不是也遇到過，上傳個幾百M的安裝包或者設計稿，眼瞅著進度條走到99%，然后……網(wǎng)絡波動一下，啪，沒了！又要從頭再來？相信我，這種崩潰的感覺我太懂了。

最近剛好在弄文件上傳的小工具，又把這塊硬骨頭啃了一遍。今天不聊虛的，就把我這次用 FastAPI 和 Vue 實現(xiàn)大文件分片上傳的完整思路，還有踩過的坑，都倒出來給你聽。

?? 核心摘要：讀完你能帶走什么？

這篇文章不會給你扔一堆晦澀的概念就跑。我會用講故事的方式，跟你講明白：

?? 分片上傳到底是怎么一回事兒，原理是啥。

?? 秒傳和斷點續(xù)傳的核心邏輯（其實就隔一層窗戶紙）。

?? 一份可以直接復制粘貼拿去用的 FastAPI 后端核心代碼。

?? 一份 Vue3 前端的實現(xiàn)思路和關鍵代碼片段。

??? 主要內(nèi)容脈絡

1?? 從一次抓狂的上傳失敗說起

2?? 別再盯著進度條了：聊聊分片、哈希與秒傳

3?? 后端實戰(zhàn)：FastAPI如何像收快遞一樣收文件

4?? 前端實戰(zhàn)：Vue里那把切文件的“菜刀”

5?? 跑起來！以及那些年我踩過的坑

6?? 結尾碎碎念

1?? 從一次抓狂的上傳失敗說起

手機上傳一段視頻到電腦，“每次到一半就掛” 我一看日志， 413 Request Entity Too Large ，Nginx和FastAPI雙雙攔截。

調(diào)整配置大小限制？那是治標不治本，大文件上傳慢、易失敗是HTTP協(xié)議天生的短板。

這就是為啥我們需要 分片上傳。

思路特簡單：把大象放進冰箱要幾步？不對，是把大文件切成小塊，一塊塊傳，最后在服務端拼起來。

2?? 別再盯著進度條了：聊聊分片、哈希與秒傳

好，咱們先來理順幾個核心概念，別急著寫代碼。

?? 文件切片（Blob.slice）

瀏覽器里，我們可以用 file.slice() 方法，像切西瓜一樣把一個 File 對象切成一個個 Blob 。比如設定每片5MB，一個100MB的文件就變成了20個小塊。

?? 文件哈希（Spark-MD5）

接下來重點來了！文件指紋，也就是MD5值。 這玩意兒是文件的唯一身份證號。你可能會問，為啥要算這個？

一是為了 秒傳：后端一看，“喲，這個MD5我數(shù)據(jù)庫里有啊，文件存著呢！” 直接告訴你“傳完了”，用戶體驗瞬間起飛。
二是為了 校驗：確保服務端拼起來的文件沒缺胳膊少腿。

這里千萬別學我當初偷懶，想著用 文件名+修改時間 來當唯一標識，結果用戶把文件重命名一下，或者換個文件夾上傳，后端就傻傻地又存了一份一模一樣的垃圾數(shù)據(jù)。

?? 斷點續(xù)傳

原理就是每次上傳前，先拿MD5去問后端：“我這文件，哪些片你已經(jīng)有了？”
后端返回一個數(shù)組，比如 [0, 1, 3] ，意思就是第0、1、3片傳過了。前端直接跳過這些片，從第2片開始傳。

是不是以為這樣就完了？對，核心就這么簡單！

3?? 后端實戰(zhàn)：FastAPI如何像收快遞一樣收文件

咱們后端用的是 Python 界的當紅炸子雞 FastAPI，它處理文件上傳異步非阻塞，性能杠杠的。

?? 檢查分片接口（實現(xiàn)秒傳+斷點續(xù)傳）

@app.post("/upload/check")
async def check_chunks(file_hash: str, total_chunks: int):
    # 1. 去數(shù)據(jù)庫查這個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}}

再說個容易翻車的點： 臨時文件夾的路徑設計。
千萬別把所有分片都扔一個文件夾里，文件多了系統(tǒng)查找速度會變慢。按 file_hash 的前兩位或者直接建一個同名文件夾，是最穩(wěn)妥的做法。

?? 上傳分片接口

@app.post("/upload/chunk")
async def upload_chunk(
    file: UploadFile = File(...),
    file_hash: str = Form(...),
    chunk_index: int = Form(...),
):
    temp_dir = Path(f"temp/{file_hash}")
    temp_dir.mkdir(exist_ok=True)
    chunk_path = temp_dir / str(chunk_index)
    # 把上傳的分片內(nèi)容異步寫入磁盤
    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(f"temp/{file_hash}")
    target_path = Path(f"uploads/{file_hash}_{file_name}")
    # 注意：要按照分片索引順序?qū)懭耄?
    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是否一致...
    # 寫入數(shù)據(jù)庫記錄...
    return {"status": "success", "code": 200}

4?? 前端實戰(zhàn)：Vue里那把切文件的“菜刀”

前端我用的是 Vue3 + Element Plus ，核心庫是 spark-md5 。

?? 第一步：切肉，不對，切文件并計算Hash

計算大文件的MD5是個CPU密集型任務，如果直接卡在主線程，頁面會直接假死。
官方文檔雖然建議用 Worker，但根據(jù)以往的經(jīng)驗，不用 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. 檢查是否秒傳或需要斷點續(xù)傳
  const { uploaded, uploadedChunks } = await checkChunksApi(fileHash, chunks.length);
  if (uploaded) {
    ElMessage.success('文件秒傳成功！');
    return;
  }
  // 2. 過濾出未上傳的分片
  const pendingChunks = chunks.filter((_, index) => !uploadedChunks.includes(index));
  // 3. 并發(fā)上傳 (千萬別同時全發(fā)出去，要控制并發(fā)數(shù)，比如一次最多6個)
  await uploadChunksWithPool(pendingChunks, fileHash, 6);
  // 4. 通知后端合并
  await mergeChunksApi(fileHash, file.name, chunks.length);
  ElMessage.success('總算傳完了，合并成功！');
}

這個工具的選擇，好比選螺絲刀，不是最貴的最好，而是最順手的。這里用 spark-md5 完全夠用，別為了高大上去引入一整套 crypto-js，太重了。

5?? 跑起來！以及那些年我踩過的坑

?? 坑一：分片大小怎么定？

別設太小，比如100KB，那樣請求數(shù)爆炸，瀏覽器并發(fā)扛不住，后端壓力也大。也別太大，失去斷點續(xù)傳的意義。個人經(jīng)驗， 5MB 或 10MB 是個很舒服的區(qū)間。

?? 坑二：合并文件時的順序！

后端合并分片時，千萬注意要按照 chunk_index 從小到大寫入。如果你用了 os.listdir() 然后直接遍歷，系統(tǒng)返回的順序可能是亂的，拼出來的文件就壞了。我就這么壞過一個3個G的模型包，血淚教訓啊！

?? 坑三：并發(fā)上傳控制

瀏覽器對同一域名的并發(fā)連接數(shù)是有限制的（HTTP/1.1一般是6個）。如果你 for 循環(huán)里直接發(fā)幾百個請求，后面的請求全得排隊，甚至直接失敗。一定要寫個簡單的請求池，控制同時在傳的分片數(shù)。

?? 結尾碎碎念

大文件上傳這玩意兒，看著唬人，其實拆解開來就三件事：切、傳、合。核心難點都在異常處理和細節(jié)的打磨上。希望我今天掏心窩子的這些分享，能讓你在實現(xiàn)這個功能時，少熬幾個大夜，少掉幾根頭發(fā)。

如果你在實際操作中遇到了什么妖魔鬼怪的問題，或者有更好的實現(xiàn)思路，歡迎隨時留言找我嘮嗑。技術在交流中才會變得更有趣嘛。

到此這篇關于FastAPI+Vue：文件分片上傳+秒傳+斷點續(xù)傳，這坑我?guī)湍悴绕搅耍〉奈恼戮徒榻B到這了,更多相關FastAPI Vue分片上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論