Subir archivos con Vuejs 2 y Vue Resource

Fecha de publicación: junio 10, 2019

Compártelo


Existen varias formas de subir archivos con Vuejs 2, aquí vemos cómo subir múltiples archivos con Laravel y Vuejs, pero para nuestro caso vamos a ver cómo hacerlo con Vuejs 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:

En nuestro caso únicamente queremos acceder al campo file que es realmente el que nos interesa, así que lo cogemos, lo añadimos a FormData utilizando append y lo enviamos al servidor, así de sencillo.

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.

¿Quieres acceder a más de 100 cursos de PHP y JavaScript?

Vuejs, Laravel, NodeJS, WordPress, Serverless, React Native, Amazon Web Services y mucho más

Quiero hacerme Premium
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login