Ich versuche immer noch, meinen Kopf darum zu wickeln.
Ich kann den Benutzer die Datei (oder sogar mehrere) mit der Dateieingabe auswählen lassen:
<form>
<div>
<label>Select file to upload</label>
<input type="file">
</div>
<button type="submit">Convert</button>
</form>
Und ich kann das submit
Ereignis mit verfolgen <fill in your event handler here>
. Aber wie sende ich die Datei mit fetch
?
fetch('/files', {
method: 'post',
// what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);
javascript
fetch-api
Gottheit
quelle
quelle
Content-Type: multipart/form-data
im Anforderungsheader deklarierenAntworten:
Dies ist ein einfaches Beispiel mit Kommentaren. Die
upload
Funktion ist genau das, wonach Sie suchen:quelle
Ich habe es so gemacht:
quelle
FormData
Objekt einschließen, wenn Sie nur die Datei hochladen (was die ursprüngliche Frage wünscht).fetch
wirdinput.files[0]
oben alsbody
Parameter akzeptieren .Ein wichtiger Hinweis zum Senden von Dateien mit der Fetch-API
Der
content-type
Header für die Abrufanforderung muss weggelassen werden. Dann fügt der Browser automatisch dieContent type
Kopfzeile einschließlich der Formulargrenze hinzu, die aussiehtDie Formulargrenze ist das Trennzeichen für die Formulardaten
quelle
Wenn Sie mehrere Dateien möchten, können Sie diese verwenden
quelle
Um eine einzelne Datei einreichen, können Sie einfach die Verwendung
File
Objekt aus deminput
s‘.files
Array direkt als Wertbody:
in Ihremfetch()
initializer:Dies funktioniert, weil er von
File
erbtBlob
undBlob
einer der im AbrufstandardBodyInit
definierten zulässigen Typen ist.quelle
body: myInput.files[0]
auf die Anzahl der auf der Clientseite im Speicher gespeicherten Bytes aus?express-fileupload
Der Anforderungsdatenstrom konnte nicht analysiert werden. Funktioniert aberFormData
wie ein Zauber.express-fileupload
es eine serverseitige Bibliothek für die Verarbeitung vonmultipart/form-data
Anforderungen, die Dateien enthalten. Ja, sie ist nicht mit diesem Ansatz kompatibel (der die Datei nur direkt als Anforderungshauptteil sendet).Die hier akzeptierte Antwort ist etwas veraltet. Ab April 2020 schlägt ein empfohlener Ansatz auf der MDN-Website die Verwendung vor
FormData
und fordert auch nicht dazu auf, den Inhaltstyp festzulegen. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_FetchIch zitiere das Code-Snippet der Einfachheit halber:
quelle
FormData
funktioniert nur, wenn der Server Formulardaten erwartet. Wenn der Server eine Rohdatei als Hauptteil des POST wünscht, ist die akzeptierte Antwort korrekt.Abspringen von Alex Montoyas Ansatz für mehrere Dateieingabeelemente
quelle
Das Problem für mich war, dass ich ein response.blob () verwendete, um die Formulardaten zu füllen. Anscheinend kann man das zumindest nicht mit native Reaktion tun, also habe ich es letztendlich benutzt
Fetch scheint dieses Format zu erkennen und die Datei zu senden, auf die der Uri zeigt.
quelle
Hier ist mein Code:
html:
quelle