如何處理大檔案上傳（不失去理智）

為什麼要最佳化大檔案上傳？

前端開發經常涉及文件上傳（圖像、視訊、音訊）。 然而，大檔案帶來了挑戰：上傳時間長，影響使用者體驗； 伺服器壓力過大和資源耗盡； 由於網路不穩定導致上傳失敗，需要重試，浪費頻寬；並增加瀏覽器記憶體消耗，影響整體效能和穩定性。 優化大文件上傳對於緩解這些問題至關重要。

現代應用程式需要有效率地處理越來越大的文件：社交平台上的高解析度媒體、教育中的大型作業以及企業環境中的大量專案文件。 傳統方法在單一請求中發送整個文件是不夠的。

傳統上傳有以下問題：

• 上傳速度慢：較大的檔案大小會導致傳輸時間過長，讓使用者感到沮喪。
• 伺服器負擔過重：伺服器難以同時處理大量數據，可能耗盡資源（記憶體、CPU、頻寬）。
• 網路漏洞：大型傳輸非常容易受到網路中斷（斷開、逾時、封包遺失）的影響，導致失敗並強製完全重新上傳。
• 瀏覽器記憶體使用率高：瀏覽器必須在記憶體中載入和管理整個文件，這可能會影響效能和穩定性。

因此，最佳化至關重要。

有效的最佳化策略

最佳化大檔案上傳的主要方法包括：

1.文件分塊

將大檔案分成更小的區塊，將每個檔案作為單獨的請求發送。這減少了每個請求的數據，加快了上傳速度，降低了伺服器負載，並實現了可續傳上傳。

<code class="language-javascript">function sliceFile(file, chunkSize) {
  const fileSize = file.size;
  const chunks = Math.ceil(fileSize / chunkSize);
  const slices = Array.from({ length: chunks }, (_, index) => {
    const start = index * chunkSize;
    const end = start + chunkSize;
    return file.slice(start, end);
  });
  return slices;
}</code>

2.並上傳寄

同時發送多個資料區塊，以最大限度地提高網路頻寬和伺服器利用率，從而增強使用者體驗。

<code class="language-javascript">async function uploadChunks(fileChunks) {
  const uploadPromises = fileChunks.map((chunk) =>
    fetch('/upload', { method: 'POST', body: chunk })
  );
  const responses = await Promise.all(uploadPromises);
  return responses;
}</code>

3.資料壓縮

在傳輸前對每個區塊進行壓縮，以進一步減小資料大小並提高傳輸效率。

<code class="language-javascript">async function compressChunk(chunk) {
  const compressedChunk = await new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      const result = pako.deflate(event.target.result);
      resolve(result);
    };
    reader.onerror = (event) => reject(event.error);
    reader.readAsArrayBuffer(chunk);
  });
  return compressedChunk;
}</code>

4.資料驗證

在傳輸之前或之後驗證每個區塊，以確保資料完整性，防止不必要或有缺陷的資料傳輸。

<code class="language-javascript">async function verifyChunk(chunk) {
  const hash = await calculateHash(chunk);
  const response = await fetch(`/verify?hash=${hash}`);
  const result = await response.json();
  return result;
}</code>

5.可斷點上傳

允許從中斷點恢復上傳，節省時間並提高上傳速度。

<code class="language-javascript">async function resumeUpload(file, resumeByte) {
  const blob = file.slice(resumeByte);
  const formData = new FormData();
  formData.append('file', blob);
  const response = await fetch('/upload', { method: 'POST', body: formData });
  const result = await response.json();
  return result;
}</code>

6.即時上傳驗證

預先上傳雜湊計算和伺服器端比較，識別相同文件，避免重複上傳。

<code class="language-javascript">function sliceFile(file, chunkSize) {
  const fileSize = file.size;
  const chunks = Math.ceil(fileSize / chunkSize);
  const slices = Array.from({ length: chunks }, (_, index) => {
    const start = index * chunkSize;
    const end = start + chunkSize;
    return file.slice(start, end);
  });
  return slices;
}</code>

結論

本文強調了大檔案上傳最佳化的必要性並提出了關鍵策略。 提供的程式碼範例說明了實際實現，使讀者能夠有效管理大文件上傳。

---

Leapcell：您的首要後端託管解決方案（支援上傳高達 100MB！）

Leapcell 是用於 Web 託管、非同步任務和 Redis 的下一代無伺服器平台，提供：

• 多語言支援： Node.js、Python、Go 和 Rust。
• 免費無限制項目： 只需支付使用費用。
• 性價比：依需求付費，無閒置費用。
• 簡化開發：直覺的 UI、自動化 CI/CD、即時指標。
• 可擴展且高效能：自動擴展，零營運開銷。

探索文件！

在 X 上追蹤我們：@LeapcellHQ

---

在我們的部落格上閱讀更多

以上是如何處理大檔案上傳（不失去理智）的詳細內容。更多資訊請關注PHP中文網其他相關文章！