大きなファイルのアップロードを処理する方法 (気を失わずに)

大きなファイルのアップロードを最適化する理由

フロントエンドの開発には、ファイル (画像、ビデオ、オーディオ) のアップロードが含まれることがよくあります。 ただし、大きなファイルにはアップロード時間が長くなり、ユーザー エクスペリエンスに影響を与えるという課題があります。 過度のサーバー負荷とリソースの枯渇。 不安定なネットワークによりアップロードが失敗し、再試行が必要になり、帯域幅が無駄になります。また、ブラウザのメモリ消費量が増加し、全体的なパフォーマンスと安定性に影響を及ぼします。 これらの問題を軽減するには、大きなファイルのアップロードを最適化することが重要です。

現代のアプリケーションでは、ソーシャル プラットフォーム上の高解像度メディア、教育における大規模な課題、企業環境における大量のプロジェクト ファイルなど、ますます大きくなるファイルの効率的な処理が求められています。 単一のリクエストでファイル全体を送信する従来の方法では不十分です。

従来のアップロードには次のような問題があります:

• アップロード速度が遅い: ファイル サイズが大きいと転送時間が長くなり、ユーザーはイライラします。
• サーバーの過負荷: サーバーは大量のデータを同時に処理するのに苦労し、リソース (メモリ、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 中国語 Web サイトの他の関連記事を参照してください。