Subir archivos de imagen a Amazon S3 con Vuejs 2 y Amplify

En prácticamente todas las aplicaciones web y móvil es necesario el trabajo con imágenes, ya sea para publicar un post o para crear una galería de fotos. En esta entrada vamos a aprender a subir archivos de imagen a Amazon S3 con Vuejs 2 y Amplify. Nuestro caso concretamente va a cubrir la subida de un archivo base64 haciendo uso de Vuetify Image Input.

La idea es muy sencilla, a través de un formulario construido con Vuejs 2 y Vuetify vamos a permitir al usuario seleccionar un archivo de imagen y a partir de ahí lo vamos a procesar contra un Bucket de S3 que previamente Amplify habrá generado y configurado por nosotros al añadir el sistema de Storage a nuestro proyecto con el siguiente comando:

Si no tienes conocimientos de Amplify no te pierdas el Curso de Vuejs 2 con AWS, Cognito y GraphQL, ahí explicamos las bases de Amplify con Vuejs 2.

Formulario para subir imágenes a S3 con Amplify

Lo primero que debemos hacer es crear un sencillo formulario haciendo uso del componente Vuetify Image Input, así que si todavía no lo has instalado en tu proyecto hazlo ahora. Una vez listo, vamos a crear un componente con Vuejs 2 y el siguiente código:

A simple vista es sencillo, simplemente tenemos un formulario que permite la subida de archivos con un botón que al pulsarlo ejecutará el método submit y procesará dicho archivo contra una clase llamada S3Utils que todavía no hemos creado, así que vamos a crear el archivo en el directorio src/classes.

Procesar imagen contra un Bucket de S3

La clase Storage de Amplify nos permite hacer uso del método put para hacer la subida de archivos a nuestro Bucket. De esta forma tan sencilla ya tenemos cubierta esta entrada y sabemos cómo subir archivos de imagen a Amazon S3 con Vuejs 2 y Amplify.