Wie kann ich Datei-Uploads mit der JavaScript-Fetch-API bewältigen?

Das Hochladen von Dateien mit der JS-Abruf-API meistern

Das Navigieren in der JS-Abruf-API kann entmutigend sein, insbesondere wenn es um Datei-Uploads geht. Vereinfachen wir diesen Prozess, indem wir ihn Schritt für Schritt aufschlüsseln.

1. Erfassen Sie die Dateieingabe

Wie in Ihrem Code gezeigt, verwenden Sie ein Dateieingabeelement, um Benutzern die Auswahl von Dateien zu ermöglichen:

<form>
  <div>
    <label>Select file to upload</label>
    <input type="file">
  </div>
  <button type="submit">Convert</button>
</form>

2. Behandeln Sie das Übermittlungsereignis

Fangen Sie das Übermittlungsereignis ab (ersetzen Sie den Platzhalter durch Ihren bevorzugten Ereignishandler):

document.querySelector('form').addEventListener('submit', (event) => {
  // Prevent default form submission
  event.preventDefault();
  
  // Retrieve the selected file
  const input = event.target.querySelector('input[type="file"]');
  
  // Construct the request body
  const formData = new FormData();
  formData.append('file', input.files[0]);
  
  // Submit the request
  fetch('/files', {
    method: 'POST',
    body: formData
  }).then(/* perform necessary actions */);
});

3. Erstellen Sie den Anforderungstext

Um die Datei per Fetch zu senden, verwenden Sie die FormData-API. Es erstellt einen mehrteiligen/Formulardaten-Anfragetext. Hängen Sie die ausgewählte Datei (input.files[0]) und alle zusätzlichen Daten, wie z. B. Benutzerinformationen, an das formData-Objekt an:

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

4. Initiieren Sie die Abrufanforderung

Wenn der Anforderungstext bereit ist, senden Sie die POST-Anfrage mit fetch, geben Sie die Endpunkt-URL („/files“) an und geben Sie das formData-Objekt als Text an:

fetch('/files', {
  method: 'POST',
  body: formData
})
.then(/* handle the response as desired */);

Und voilà! Sie verfügen jetzt über einen voll funktionsfähigen Mechanismus zum Hochladen von Dateien mithilfe der JS-Abruf-API.

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