ES6 - API FETCH (ENVIAR UN ARCHIVO ADJUNTO)
ES6 - API fetch
(enviar un archivo adjunto)
Para enviar un
archivo adjunto utilizando fetch en ES6, necesitarás crear una instancia de
FormData y agregar el archivo adjunto a ella utilizando el método append.
Luego, puedes incluir la instancia de FormData en el cuerpo de la solicitud
fetch con el tipo de contenido "multipart/form-data". Aquí hay un
ejemplo:
javascript
Copy code
const fileInput =
document.querySelector('#file-input');
fileInput.addEventListener('change', () => {
const file =
fileInput.files[0];
// Create a
new FormData instance and append the file to it
const formData
= new FormData();
formData.append('file', file);
// Send the
FormData to the server using fetch
fetch('/upload', {
method:
'POST',
body:
formData
})
.then(response
=> {
if
(!response.ok) {
throw new
Error('Network response was not ok');
}
return
response.json();
})
.then(data
=> {
console.log(data);
})
.catch(error
=> {
console.error('There was an error uploading the file:', error);
});
});
En el ejemplo
anterior, el archivo se obtiene del elemento input del tipo file y se agrega a
una instancia de FormData utilizando el método append. Luego, la instancia de
FormData se incluye en la solicitud fetch en el cuerpo de la solicitud con el
tipo de contenido "multipart/form-data". La respuesta de la solicitud
se convierte a JSON utilizando el método json, y se imprime en la consola. Si
hay algún error al enviar la solicitud, se maneja en el bloque catch. Tendrás
que ajustar la URL de la solicitud y cualquier otra información adicional que
necesites enviar en la solicitud, como cabeceras o parámetros de consulta.
jose fernandez
document.getElementById("foto").files[0]
document.getElementById("foto").files[0]
es una forma de acceder al primer archivo que se ha seleccionado en un elemento
de entrada de archivo (input type="file").
En este caso,
document.getElementById("foto") se refiere al elemento HTML que tiene
un atributo id igual a "foto". Luego, .files[0] accede al primer
archivo seleccionado en ese elemento. Si se seleccionaron varios archivos, se
pueden acceder a ellos utilizando un bucle o mediante índices adicionales.
Una vez que se tiene
una referencia al archivo seleccionado, se puede utilizar para enviarlo a un
servidor utilizando XMLHttpRequest o mediante la API Fetch. Por ejemplo, en la
API Fetch, puedes crear una instancia de FormData, agregar el archivo
seleccionado a ella utilizando append, y luego enviarla al servidor en el
cuerpo de la solicitud.
Comentarios
Publicar un comentario