Subir archivos con Vuejs 2 y Vue Resource
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:
https://gist.github.com/anonymous/48e50fb9faced7ab8c2ad5853287b97f
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.