Cómo cargar un archivo usando Fetch

Cómo subir archivos al servidor usando la API Fetch, explicado de forma sencilla

Hay una tarea que debería ser sencilla, pero que a veces lleva horas de investigación en la Web: subir archivos al servidor.

En este tutorial te explico cómo hacerlo usando fetch.

Dado un formulario con un campo de entrada de archivo:

input type="file" /

changeLe adjuntamos un controlador de eventos:

document.querySelector('#fileUpload').addEventListener('change', event = { handleImageUpload(event)})

y gestionamos la mayor parte de nuestra lógica en la handleImageUpload()función:

const handleImageUpload = event = { const files = event.target.files const formData = new FormData() formData.append('myFile', files[0]) fetch('/saveImage', { method: 'POST', body: formData }) .then(response = response.json()) .then(data = { console.log(data) }) .catch(error = { console.error(error) })}

En este ejemplo, realizamos POST en el /saveImagepunto final.Te recomendamos Todo sobre sofas

Inicializamos un nuevo FormDataobjeto y lo asignamos a la formDatavariable y allí agregamos el archivo cargado. Si tenemos más de un elemento de entrada de archivo, tendremos más de una append()llamada.

La datavariable dentro del segundo then()contendrá los datos de retorno analizados en JSON. Supongo que su servidor le dará JSON como respuesta.

Vea cómo manejar imágenes cargadas en el servidor

Tips para principiantes de JavaScript

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Cómo cargar un archivo usando Fetch

Hay una tarea que debería ser sencilla, pero que a veces lleva horas de investigación en la Web: subir archivos al servidor. Cómo subir archivos al servidor

programar

es

2025-01-22

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente