Wie kann ich Dateien mit der JavaScript-Fetch-API hochladen?

Dateien mit der JS-Fetch-API hochladen: Die Geheimnisse enthüllen

Zu verstehen, wie man Dateien mit der JS-Fetch-API hochlädt, kann eine entmutigende Aufgabe sein. Um dieses Konzept zu verdeutlichen, werden wir aufschlüsseln, wie eine Datei zum Hochladen nach der Erfassung des Submit-Ereignisses gesendet wird.

Bedenken Sie zunächst, dass wir mit dem Eingabe-Tag eine Datei (oder sogar mehrere) mithilfe der Dateieingabe auswählen können Verfahren. Um das Submit-Ereignis abzufangen, müssen Sie den entsprechenden Event-Handler in Ihrem Code angeben.

Jetzt kommt der entscheidende Teil: Senden der Datei mit fetch. Die Syntax hierfür lautet:

fetch('/files', {
  method: 'post',
  // what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);

Um eine Datei erfolgreich zu senden, müssen wir die Body-Eigenschaft mit den Dateidaten füllen und den richtigen Content-Type-Header festlegen. Hier ist ein erweiterter Codeausschnitt, der die Vorgehensweise veranschaulicht:

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

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

In diesem Code wird FormData verwendet, um ein neues Formulardatenobjekt zu erstellen, und die Dateidaten werden mithilfe der Append-Methode angehängt. Der Content-Type-Header wird automatisch auf „multipart/form-data“ gesetzt, was für Datei-Upload-Anfragen erforderlich ist.

Damit kann Ihr Code mühelos Dateien mithilfe der Abruf-API auf einen Server hochladen.

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