Wie sende ich Dateien mithilfe der JavaScript-Abruf-API an einen Server?

So laden Sie eine Datei mit der JS-Fetch-API hoch

Das Hochladen einer Datei über die Fetch-API ist eine wertvolle Technik zum Übertragen von Daten von einer Webanwendung an einen Server. Als Entwickler ist es wichtig, den Prozess zu verstehen, um Datei-Uploads effektiv zu handhaben.

Stellen Sie sich das Szenario vor, in dem Sie über ein Eingabefeld verfügen, mit dem Benutzer eine Datei auswählen können:

<input type="file">

Bei der Übermittlung des Formulars, das die Dateieingabe enthält, müssen Sie fetch() verwenden, um die Datei an den Server zu übertragen. Diese Aufgabe erfordert jedoch sorgfältige Beachtung der Struktur des Anfragetextes.

fetch('/files', {
  method: 'POST',
  // What goes here? How do we construct the body?
})

Um den Text der Anfrage zu erstellen, nutzen wir die FormData-Schnittstelle. Diese Schnittstelle ermöglicht die Erstellung einer Sammlung von Schlüssel-Wert-Paaren, die Dateiobjekte enthalten können.

const formData = new FormData();
formData.append('file', input.files[0]);

Im obigen Code hängen wir die ausgewählte Datei mithilfe der Append-Methode an das FormData-Objekt an. Das erste Argument stellt den Schlüssel dar, während das zweite Argument das aus der Dateieingabe abgerufene Dateiobjekt ist.

Darüber hinaus können Sie bei Bedarf weitere Schlüssel-Wert-Paare in das FormData-Objekt aufnehmen. Sie könnten beispielsweise Benutzerdaten hinzufügen:

formData.append('user', 'hubot');

Wenn das FormData-Objekt bereit ist, können wir schließlich die Abrufanforderung wie folgt erstellen:

fetch('/avatars', {
  method: 'POST',
  body: formData
})

Diese Anfrage sendet die ausgewählte Datei und alle zusätzlichen Daten im FormData-Objekt an den Endpunkt „/avatars“ auf dem Server. Der Server kann die Datei dann nach Bedarf verarbeiten.

Das obige ist der detaillierte Inhalt vonWie sende ich Dateien mithilfe der JavaScript-Abruf-API an einen Server?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!