Wie kann ich mithilfe der JavaScript-Abruf-API Dateien auf einen Server hochladen?

Hochladen von Dateien mit der JS-Abruf-API

Das Hochladen von Dateien mit der JS-Abruf-API kann zunächst verwirrend sein. Nachdem Sie die Datei(en) mithilfe einer Dateieingabe ausgewählt haben, besteht der nächste Schritt darin, die fetch()-Methode zu integrieren, um die Datei an den Server zu senden.

Um die Fetch-API zum Hochladen von Dateien zu verwenden, benötigen Sie Folgendes um ein FormData-Objekt zu erstellen. Dieses Objekt kapselt sowohl die Dateidaten als auch alle zusätzlichen Formulardaten, die Sie einschließen möchten.

var input = document.querySelector('input[type="file"]');
var data = new FormData();
data.append('file', input.files[0]); // Append the selected file to the form data

Zusätzlich zur Datei können Sie mit append() weitere Daten zum Formular hinzufügen, wie im Code veranschaulicht unten:

data.append('user', 'hubot'); // Append additional form data

Jetzt können Sie die fetch()-Methode verwenden, um eine POST-Anfrage an Ihren Serverendpunkt zu stellen und dabei die Formulardaten als Anfrage zu übergeben body:

fetch('/avatars', {
  method: 'POST',
  body: data
}).then(function(response) {
  // Handle the response from the server
});

Dieser Ansatz ermöglicht Ihnen das bequeme Senden von Dateien und anderen Daten mithilfe der ausgefeilten Funktionen der Fetch-API.

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