Wie man große Datei-Uploads ohne den Verstand zu verlieren handhabt

Warum die Optimierung großer Datei-Uploads in Betracht gezogen werden sollte

In der Frontend-Entwicklung begegnen wir oft Szenarien, in denen Datei-Uploads erforderlich sind, z. B. das Hochladen von Bildern, Videos, Audiodateien usw. Während Datei-Uploads können Probleme auftreten, wenn die Dateien zu groß sind, wie z. B.:

Führen zu langen Upload-Zeiten und einer schlechten Benutzererfahrung.
Verursachen übermäßige Serverlast und Ressourcenverbrauch.
Führen zu Upload-Fehlern unter instabilen Netzwerkbedingungen, die erneute Uploads erfordern und Zeit und Bandbreite verschwenden.
Führen zu hoher Browser-Speichernutzung, was die Leistung und Stabilität beeinträchtigt.

Um diese Probleme zu beheben, müssen wir große Datei-Uploads optimieren.

In modernen Internetanwendungen haben Benutzer zunehmend hohe Anforderungen an Datei-Uploads, wie z. B.:

Teilen hochauflösender Bilder und Videos auf sozialen Plattformen.
Einreichen von Aufgaben und Kursmaterialien auf Bildungsplattformen.
Hochladen von Projektdokumenten und Berichten auf Unternehmensplattformen.

In diesen Szenarien sind die Dateien, die Benutzer hochladen müssen, oft recht groß und erreichen manchmal Hunderte von Megabyte oder sogar mehrere Gigabyte. Wenn wir traditionelle Datei-Upload-Methoden verwenden, werden wir mit den oben genannten Problemen konfrontiert.

Die traditionelle Datei-Upload-Methode beinhaltet das Senden der gesamten Datei als einzelnen Request-Body an den Server. Dieser Ansatz hat mehrere Nachteile:

Lange Upload-Zeiten: Aufgrund der großen Dateigröße dauert es lange, die Daten zu übertragen, wodurch Benutzer lange warten müssen, um die Upload-Ergebnisse zu sehen.
Hohe Serverlast: Große Dateien erfordern, dass der Server große Datenmengen gleichzeitig empfängt und verarbeitet, was potenziell übermäßigen Serverspeicher, CPU, Bandbreite und andere Ressourcen verbraucht.
Anfällig für Fehler in instabilen Netzwerken: Große Dateiübertragungen sind anfällig für Netzwerkprobleme wie Verbindungsabbrüche, Timeouts oder Paketverluste, die zu Upload-Fehlern führen und Benutzer zwingen, die gesamte Datei erneut hochzuladen.
Hohe Browser-Speichernutzung: Große Dateien erfordern, dass der Browser die gesamte Datei in den Speicher lädt und die Verbindung aufrechterhält, was zu einer hohen Speichernutzung führen und die Leistung anderer Seiten beeinträchtigen kann.

Um diese Probleme zu beheben, ist die Optimierung großer Datei-Uploads unerlässlich.

Designansatz

Die wichtigsten Ansätze zur Optimierung großer Datei-Uploads umfassen:

1. Chunking

Teilen Sie eine große Datei in kleinere Chunks auf, wobei jeder Chunk als separate Anfrage an den Server gesendet wird. Dies reduziert die Datenmenge pro Anfrage, verkürzt die Upload-Zeiten, verringert die Serverlast und ermöglicht fortsetzbare Uploads.

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;
}

2. Konkurrenz

Senden Sie mehrere Chunk-Anfragen gleichzeitig an den Server, um die Netzwerkbandbreite und die Serverressourcen voll auszunutzen und die Benutzererfahrung zu verbessern.

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

3. Komprimierung

Komprimieren Sie jeden Chunk, bevor Sie ihn an den Server senden, um die Datengröße weiter zu reduzieren und die Übertragungseffizienz zu verbessern.

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;
}

4. Validierung

Validieren Sie jeden Chunk vor oder nach der Übertragung, um die Datenintegrität und -korrektheit sicherzustellen und redundante oder fehlerhafte Datenübertragungen zu vermeiden.

async function verifyChunk(chunk) {
  const hash = await calculateHash(chunk);
  const response = await fetch(`/verify?hash=${hash}`);
  const result = await response.json();
  return result;
}

5. Fortsetzbare Uploads

Setzen Sie im Falle eines Netzwerkausfalls den Upload ab dem Unterbrechungspunkt fort, anstatt von vorne zu beginnen, wodurch Zeit gespart und die Geschwindigkeit verbessert wird.

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;
}

6. Sofortige Uploads

Berechnen Sie vor dem Slicen der Datei für den Upload ihren Hash und senden Sie ihn an den Server. Wenn der Server eine identische Datei findet, kann er sofort eine Erfolgsmeldung zurückgeben, wodurch redundante Uploads vermieden werden.

async function checkFileExists(file) {
  const hash = await calculateHash(file);
  const response = await fetch(`/check?hash=${hash}`);
  const result = await response.json();
  return result;
}

Zusammenfassung

Dieser Artikel erklärt, warum große Datei-Uploads optimiert werden müssen und welche Hauptoptimierungsstrategien es gibt. Anhand von Codebeispielen wird gezeigt, wie diese Optimierungsmethoden implementiert werden können, mit dem Ziel, den Lesern zu helfen, Lösungen zur Optimierung großer Datei-Uploads zu verstehen und anzuwenden.