Pregunta ¿Cómo cargo un archivo con la API JS fetch?


Todavía estoy tratando de entenderlo.

Puedo hacer que el usuario seleccione el archivo (o incluso múltiple) con la entrada del archivo:

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

Y puedo atrapar el submit evento usando <fill in your event handler here>. Pero una vez que lo hago, ¿cómo envío el archivo usando fetch?

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

74
2018-03-17 17:31


origen


Respuestas:


Este es un ejemplo básico con comentarios. los upload función es lo que estás buscando:

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

52
2018-03-18 10:31



Lo he hecho así:

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

107
2017-11-27 08:05



Para enviar un solo archivo, simplemente puede usar File objeto de la inputes .files matriz directamente como el valor de body: en tus fetch() inicializador:

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

Esto funciona porque File hereda de Bloby Blob es uno de los permitidos BodyInit tipos definidos en el Estándar de obtención.


13
2018-01-23 19:52



Una nota importante para enviar archivos con la API de obtención

Uno necesita omitir content-type encabezado para la solicitud Fetch. Luego, el navegador agregará automáticamente el Content type encabezado incluyendo el límite de formulario que se parece

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

El límite de formulario es el delimitador de los datos del formulario


11
2018-03-27 10:49



Si tu quieres múltiplos archivo, puedes usar esto

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

6
2018-05-22 16:56