Come faccio a caricare un file con l'API di recupero JS?

Sto ancora cercando di avvolgerci la testa.

Posso fare in modo che l'utente selezioni il file (o anche più) con l'input del file:

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

E posso seguire l' submitevento usando <fill in your event handler here>. Ma una volta fatto, come posso inviare il file usando fetch?

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

Questo è un esempio di base con commenti. La uploadfunzione è ciò che stai cercando:

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

L'ho fatto così:

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

Una nota importante per l'invio di file con API Fetch

È necessario omettere l' content-typeintestazione per la richiesta di recupero. Quindi il browser aggiungerà automaticamente l' Content typeintestazione incluso il confine del modulo che appare

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

Il limite del modulo è il delimitatore per i dati del modulo

Se vuoi più file, puoi usarlo

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

Per inviare un singolo file, si può semplicemente utilizzare l' Fileoggetto dalla input's .filesmatrice direttamente come il valore della body:nella vostra fetch()inizializzatore:

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

Questo funziona perché Fileeredita da Blobed Blobè uno dei BodyInittipi consentiti definiti nello standard di recupero.

La risposta accettata qui è un po 'datata. A partire da aprile 2020, un approccio raccomandato visto sul sito Web MDN suggerisce l'utilizzo FormDatae inoltre non richiede di impostare il tipo di contenuto. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Sto citando lo snippet di codice per comodità:

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

Saltare fuori dall'approccio di Alex Montoya per più elementi di input di file

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

Il problema per me era che stavo usando response.blob () per popolare i dati del modulo. Apparentemente non puoi farlo almeno con reagire nativo, quindi ho finito per usare

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

Fetch sembra riconoscere quel formato e inviare il file a cui punta l'uri.

Ecco il mio codice:

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>