Subir archivos con Vuejs 2 y Vue Resource

Fecha de publicación: junio 10, 2019

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on google
Google+
Share on whatsapp
WhatsApp
Share on email
Email

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 150 cursos de PHP y JavaScript?

¿Quieres ganar tiempo en tus desarrollos con nuestros proyectos descargables?


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

Hazte Premium y consigue acceso completo
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register
¡YA ESTÁ AQUÍ HALLOWEEN! LA MEJOR PROMOCIÓN DEL AÑO
¡HALLOWEEN 2021!