Wie lade ich eine Datei mit der JS-Abruf-API hoch?

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 submitEreignis 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 */);

Dies ist ein einfaches Beispiel mit Kommentaren. Die uploadFunktion ist genau das, wonach Sie suchen:

// Select your input type file and store it in a variable
const input = document.getElementById('fileinput');

// This will upload the file after having read it
const upload = (file) => {
  fetch('http://www.example.net', { // Your POST endpoint
    method: 'POST',
    headers: {
      // Content-Type may need to be completely **omitted**
      // or you may need something
      "Content-Type": "You will perhaps need to define a content-type here"
    },
    body: file // This is your file object
  }).then(
    response => response.json() // if the response is a JSON object
  ).then(
    success => console.log(success) // Handle the success response object
  ).catch(
    error => console.log(error) // Handle the error response object
  );
};

// Event handler executed when a file is selected
const onSelectFile = () => upload(input.files[0]);

// Add a listener on your input
// It will be triggered when a file will be selected
input.addEventListener('change', onSelectFile, false);

Ich habe es so gemacht:

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
})

Ein wichtiger Hinweis zum Senden von Dateien mit der Fetch-API

Der content-typeHeader für die Abrufanforderung muss weggelassen werden. Dann fügt der Browser automatisch die Content typeKopfzeile einschließlich der Formulargrenze hinzu, die aussieht

Content-Type: multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD

Die Formulargrenze ist das Trennzeichen für die Formulardaten

Wenn Sie mehrere Dateien möchten, können Sie diese verwenden

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

var data = new FormData()
for (const file of input.files) {
  data.append('files',file,file.name)
}

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

Um eine einzelne Datei einreichen, können Sie einfach die Verwendung FileObjekt aus dem inputs‘ .filesArray direkt als Wert body:in Ihrem fetch()initializer:

const myInput = document.getElementById('my-input');

// Later, perhaps in a form 'submit' handler or the input's 'change' handler:
fetch('https://example.com/some_endpoint', {
  method: 'POST',
  body: myInput.files[0],
});

Dies funktioniert, weil er von Fileerbt Blobund Blobeiner der im Abrufstandard BodyInitdefinierten zulässigen Typen ist.

Die hier akzeptierte Antwort ist etwas veraltet. Ab April 2020 schlägt ein empfohlener Ansatz auf der MDN-Website die Verwendung vor FormDataund fordert auch nicht dazu auf, den Inhaltstyp festzulegen. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Ich zitiere das Code-Snippet der Einfachheit halber:

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData
})
.then((response) => response.json())
.then((result) => {
  console.log('Success:', result);
})
.catch((error) => {
  console.error('Error:', error);
});

Abspringen von Alex Montoyas Ansatz für mehrere Dateieingabeelemente

const inputFiles = document.querySelectorAll('input[type="file"]');
const formData = new FormData();

for (const file of inputFiles) {
    formData.append(file.name, file.files[0]);
}

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

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

data.append('fileData', {
  uri : pickerResponse.uri,
  type: pickerResponse.type,
  name: pickerResponse.fileName
 });

Fetch scheint dieses Format zu erkennen und die Datei zu senden, auf die der Uri zeigt.

Hier ist mein Code:

html:

const upload = (file) => {
    console.log(file);

    

    fetch('http://localhost:8080/files/uploadFile', { 
    method: 'POST',
    // headers: {
    //   //"Content-Disposition": "attachment; name='file'; filename='xml2.txt'",
    //   "Content-Type": "multipart/form-data; boundary=BbC04y " //"multipart/mixed;boundary=gc0p4Jq0M2Yt08jU534c0p" //  ή // multipart/form-data 
    // },
    body: file // This is your file object
  }).then(
    response => response.json() // if the response is a JSON object
  ).then(
    success => console.log(success) // Handle the success response object
  ).catch(
    error => console.log(error) // Handle the error response object
  );

  //cvForm.submit();
};

const onSelectFile = () => upload(uploadCvInput.files[0]);

uploadCvInput.addEventListener('change', onSelectFile, false);

<form id="cv_form" style="display: none;"
										enctype="multipart/form-data">
										<input id="uploadCV" type="file" name="file"/>
										<button type="submit" id="upload_btn">upload</button>
</form>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="#" id="upload">UPLOAD CV</a></li>
<li class="nav-item"><a class="nav-link" href="#" id="download">DOWNLOAD CV</a></li>
</ul>