国产欧美精品专区一区二区_91www永久在线精品果冻传媒_日韩成人亚洲综合专区无码av_欧美激情一区二区三区高清视频_免费福利在线视频亚洲_日韩精品无码人妻自慰喷水_把腿张开老子cao哭你动态图_51a性爱高清免费视频_国产无码资源在线观看資源免費看_再深点灬舒服灬太大了网站

你給一家在線教育平臺(tái)做「課程視頻批量上傳」功能。
需求聽(tīng)起來(lái)很樸素：講師后臺(tái)一次性拖 20 個(gè) 4K 視頻，瀏覽器要穩(wěn)、要快、要能斷網(wǎng)續(xù)傳。
你第一版直接 <input type="file"> + FormData，結(jié)果上線當(dāng)天就炸：

• 講師 A 上傳 4.7 GB 的 .mov，Chrome 直接 內(nèi)存溢出 崩潰；
• 講師 B 網(wǎng)斷了 3 分鐘，重新上傳發(fā)現(xiàn)進(jìn)度條歸零，心態(tài)跟著歸零；
• 運(yùn)營(yíng)同學(xué)瘋狂 @ 前端：“你們是不是沒(méi)做分片？”

解決方案：三層防線，把 4 GB 切成 2 MB 的“薯片”

1. 表面用法：分片 + 并發(fā)，瀏覽器再也不卡

// upload.js
const CHUNK_SIZE = 2 * 1024 * 1024;    // ?? 2 MB 一片，內(nèi)存友好
export async function* sliceFile(file) {
  let cur = 0;
  while (cur < file.size) {
    yield file.slice(cur, cur + CHUNK_SIZE);
    cur += CHUNK_SIZE;
  }
}

// uploader.js
import pLimit from 'p-limit';
const limit = pLimit(5);               // ?? 最多 5 并發(fā)，防止占滿帶寬
export async function upload(file) {
  const hash = await calcHash(file);   // ?? 秒傳、斷點(diǎn)續(xù)傳都靠它
  const tasks = [];
  for await (const chunk of sliceFile(file)) {
    tasks.push(limit(() => uploadChunk({ hash, chunk })));
  }
  await Promise.all(tasks);
  await mergeChunks(hash, file.name);  // ?? 通知后端合并
}

逐行拆解：

• sliceFile 用 file.slice 生成 Blob 片段，不占額外內(nèi)存；
• p-limit 控制并發(fā)，避免 100 個(gè)請(qǐng)求同時(shí)打爆瀏覽器；
• calcHash 用 WebWorker 算 MD5，頁(yè)面不卡頓（后面細(xì)講）。

2. 底層機(jī)制：斷點(diǎn)續(xù)傳到底續(xù)在哪？

sequenceDiagram
    participant F as 前端
    participant B as 后端
    F->>B: POST /prepare {hash, totalChunks}
    B-->>F: 200 OK {uploaded:[0,3,7]}
    loop 上傳剩余分片
        F->>B: POST /upload {hash, index, chunkData}
        B-->>F: 200 OK
    end
    F->>B: POST /merge {hash}
    B-->>F: 200 OK
    Note over B: 按順序?qū)懘疟P(pán)

1. 前端先 POST /prepare 帶 hash + 總分片數(shù)；
2. 后端返回已上傳索引 [0, 3, 7]；
3. 前端跳過(guò)這 3 片，只傳剩余；
4. 全部完成后 POST /merge，后端按順序?qū)懘疟P(pán)。

3. 設(shè)計(jì)哲學(xué)：把“上傳”做成可插拔的協(xié)議

interface Uploader {
  prepare(file: File): Promise<PrepareResp>;
  upload(chunk: Blob, index: number): Promise<void>;
  merge(): Promise<string>;            // ?? 返回文件 URL
}

我們實(shí)現(xiàn)了三套：

• BrowserUploader：純前端分片；
• TusUploader：遵循 tus.io 協(xié)議，天然斷點(diǎn)續(xù)傳；
• AliOssUploader：直傳 OSS，用 OSS 的斷點(diǎn) SDK。

應(yīng)用擴(kuò)展：拿來(lái)即用的配置片段

1. WebWorker 算 Hash（防卡頓）

// hash.worker.js
importScripts('spark-md5.min.js');
self.onmessage = ({ data: file }) => {
  const spark = new SparkMD5.ArrayBuffer();
  const reader = new FileReaderSync();
  for (let i = 0; i < file.size; i += CHUNK_SIZE) {
    spark.append(reader.readAsArrayBuffer(file.slice(i, i + CHUNK_SIZE)));
  }
  self.postMessage(spark.end());
};

2. 環(huán)境適配

舉一反三：3 個(gè)變體場(chǎng)景

1. 秒傳
   上傳前先算 hash → 調(diào)后端 /exists?hash=xxx → 已存在直接返回 URL，0 流量完成。
2. 加密上傳
   在 uploadChunk 里加一層 AES-GCM 加密，后端存加密塊，下載時(shí)由前端解密。
3. P2P 協(xié)同上傳
   用 WebRTC 把同局域網(wǎng)學(xué)員的瀏覽器變成 CDN，分片互傳后再統(tǒng)一上報(bào)，節(jié)省 70% 出口帶寬。

小結(jié)

大文件上傳的核心不是“傳”，而是“斷”。
把 4 GB 切成 2 MB 的薯片，再配上一張能續(xù)命的“進(jìn)度表”，瀏覽器就能穩(wěn)穩(wěn)地吃下任何體積的視頻。

?轉(zhuǎn)自https://juejin.cn/post/7530868895768838179