Subir archivos con Vuejs 2 y Vue Resource

Subir archivos con Vuejs 2 y Vue Resource
Existen varias formas de subir archivos con Vuejs 2, para nuestro caso vamos a ver cómo hacerlo utilizando FormData y Vue Resource.

La idea es muy simple, crearemos un formulario con html, añadiremos un evento al campo file para detectar cuando haya cambiado, obtendremos su valor y enviaremos los datos al servidor utilizando el cliente HTTP de Vue Vue Resource.

Instalar y configurar Vue Resource

Lo primero que necesitamos es Vue Resource, así que vamos a instalarlo, tienes 2 opciones, yarn o npm.

Una vez instalado, debes cargar el plugin en tu aplicación.

Una vez hemos cargado el plugin en nuestra aplicación estamos en condiciones de poder ejecutar el siguiente ejemplo.

Cómo puedes ver he comentado un ejemplo con FormData, cualquier de los 2 casos debería funcionar, o bien coger todo el formulario con jQuery, o accediendo únicamente al campo file que es realmente el que nos interesa.

Gracias al método post de Vue Resource (Vue.http) podemos ejecutar una petición post a un servidor, si además necesitas pasar algunos headers en tu petición, el tercer parámetro del método POST acepta un objeto con los encabezados que necesites, así que podrías enviarlos de forma sencilla.

Así de sencillo es subir archivos con Vuejs 2 y Vue Resource, espero que te haya parecido interesante.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies
No te pierdas los últimos cursos y las nuevas promociones de CursosdesarrollowebACCEDER AHORA
+ +