Imagen de perfil

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:

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.

10 junio, 2019
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register