Comment télécharger un fichier avec l'API JS fetch?

J'essaye toujours d'enrouler ma tête autour de ça.

Je peux demander à l'utilisateur de sélectionner le fichier (ou même plusieurs) avec l'entrée de fichier:

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

Et je peux attraper l' submitévénement en utilisant <fill in your event handler here>. Mais une fois que je le fais, comment envoyer le fichier en utilisant fetch?

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

Ceci est un exemple de base avec des commentaires. La uploadfonction est ce que vous recherchez:

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

Je l'ai fait comme ça:

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

Une note importante pour l'envoi de fichiers avec Fetch API

Il faut omettre l'en- content-typetête pour la requête Fetch. Ensuite, le navigateur ajoutera automatiquement l'en- Content typetête, y compris la limite du formulaire qui ressemble à

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

La limite du formulaire est le délimiteur des données du formulaire

Si vous voulez plusieurs fichiers, vous pouvez utiliser ceci

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

Pour soumettre un seul fichier, vous pouvez simplement utiliser l' Fileobjet du tableau de input's .filesdirectement comme valeur de body:dans votre fetch()initialiseur:

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],
});

Cela fonctionne car Filehérite de Blobet Blobest l'un des BodyInittypes autorisés définis dans la norme Fetch.

La réponse acceptée ici est un peu datée. À partir d'avril 2020, une approche recommandée vue sur le site Web de MDN suggère d'utiliser FormDataet ne demande pas non plus de définir le type de contenu. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Je cite l'extrait de code pour plus de commodité:

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

Sauter de l'approche d'Alex Montoya pour plusieurs éléments d'entrée de fichier

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

Le problème pour moi était que j'utilisais un response.blob () pour remplir les données du formulaire. Apparemment, vous ne pouvez pas faire cela au moins avec React Native, alors j'ai fini par utiliser

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

Fetch semble reconnaître ce format et envoyer le fichier vers lequel pointe l'URI.

Voici mon 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>