Cómo subir imágenes y archivos a un servidor local Node.js en un proyecto Vue.

A la hora de ponernos a trabajar con servicios en proyectos de Vue, necesitamos aprender cómo podemos traernos los diferentes datos almacenados en un servidor, poder modificarlos, eliminarlos y añadirlos por supuesto, pero hay que tener en cuenta que no todas las API que podemos encontrar en internet nos dejan insertar unos tipos de datos como son ficheros. El problema está que no podemos modificar esas API que estábamos utilizando ya que no nos pertenecen, por ello para poder practicar de una manera local, podemos crearnos nuestra propia API y poder modificarla a nuestra conveniencia añadiéndole tantas llamadas como utilidades le queremos dar.

Para esta ocasión vamos a crear una API local que nos permita insertar archivos y/o imágenes y aquí les muestro mi resolución al problema presentado.

Para poder realizar la subida de archivos y/o imágenes a un servidor local en Node.js debemos tener en cuenta los siguientes prerrequisitos:

• Tener instalado Vue/Cli.
• Tener instalado Node.js
• Tener instalado Visual Studio Code (ya que será el entorno de desarrollo en el que vamos a trabajar).

Teniendo el anterior paso realizado, entonces podremos comenzar a realizar el ejercicio.

1.-Lo primero a realizar será crear una carpeta ejercicioAPI_VUE que contendrá las siguientes carpetas: una llamada API (la cual contendrá el servidor con el que vamos a trabajar) y otra llamada formulariovue (que será el proyecto en cuestión con el que vamos a enviar y recoger los archivos del servidor).

2.- A continuación, vamos a crear el servidor en Node js, y para ello debemos realizar los siguientes pasos:

• Entraremos al Cmder y nos redireccionamos a la carpeta API:

• Una vez llegados a la carpeta, debemos ejecutar los siguientes comandos:

• npm install: Este comando será el gestor de paquetes que necesitaremos para crear el servidor.
• npm init: Este comando nos crea un archivo package.json que lo necesitaremos para configurar la API.

3.- Una vez instalado correctamente los archivos correspondientes de los anteriores comandos, entraremos a Visual Studio Code y veremos qué cambios se han realizado dentro de la carpeta API.

4.-Hay archivos que seguramente no aparezcan en su estructura, pero eso se debe a las dependencias que debemos instalar para que tenga esa misma estructura. Para ello utilizaremos los siguientes comandos:

• npm install express –save: Ejecuta el framework que monta una infraestructura web sencilla de utilizar.
• npm install nodemon –save-dev: Realiza los cambios a tiempo real en el servidor (para así no tener que estar apagando y encendiendo los puertos cada vez que hagamos un cambio).
• npm install –global webpack webpack-cli: Lo que haremos será crear el archivo server.bundle.js y con este, ya se podrá desplegar la aplicación que queremos crear.
• npm install del: Es un comando con una API promise que soporta múltiples archivos y globbing. (También protege que eliminemos el directorio de trabajo actual o superior).
• npm install gulp gulp-zip fancy-log del webpack-stream –save-dev: Este gran comando lo que nos realiza es instalar las siguientes dependencias: gulp, fancy-log, del, webpack-stream. El motivo del porqué instalar las siguientes dependencias es por el consiguiente motivo:
  • Limpiar el directorio si existe.
  • Cree un directorio si no existe para poner toda la compilación de producción.
  • Cree un directorio Vue con Vue-cli-service.
  • Coloque el código de Vue en el directorio de producción.
  • Construye el código del servidor con el paquete web.
  • Coloque el código del servidor en el directorio de producción.
  • Finalmente comprime el código.

5.- Tras realizar todos estos cambios, accedemos a nuestro archivo package.json:

En el apartado de scripts, debemos añadir los comandos de: start (monta toda la aplicación), build (es el que monta toda la parte del proyecto en vue para que sea operativo y lo trae a la carpeta API) y dev (enciende el servidor).

6.- Una vez preparada toda la estructura, entonces iremos creando el servidor en el archivo server.js:

7.- Ahora vamos a comprobar si el servidor enciende correctamente utilizando el comando: npm run dev

8.- Comprobando que hasta este paso todo ha funcionado, entonces nos vamos a ir a la carpeta ejercicioAPI_VUE y vamos a crear un proyecto en vue utilizando el comando: vue create formulariovue.

9.- Una vez creado el proyecto, debemos instalar las siguientes dependencias:

• npm install –save vue-router: Instalaremos el Routing (la navegación entre componentes).
• npm install –save axios: Instalaremos el servicio (Será quién nos permita acceder a las rutas que creamos antes en el archivo server.js).

10.- Existen dos diferencias importantes en la estructura de nuestro proyecto recién creado con el mostrado en la imagen:

• La carpeta dist: Dicha carpeta se crea cuando, al guardar los cambios de nuestro proyecto y tenerlo preparado para montar en nuestro servidor ejecutamos el comando npm run build. Lo que hace es crear esa carpeta, que es el contenido necesario para desplegarlo en la API.
• El archivo vue.config.js: Es el archivo que creará la comunicación entre la API y el proyecto.

11.- Vamos a crear el archivo vue.config.js:

Este archivo es el puente que crea la interacción entre ambos pudiendo hasta enviar las llamadas a la propia API de Vue a la API de nuestro servidor. Para ello Vue CLI nos proporciona algunas funciones incorporadas, y para decirle al servidor de Vue que envíe a través de proxy cualquier solicitud desconocida al servidor de nuestra API solo debemos agregar este archivo a la raíz de nuestro proyecto (tal y como muestra la imagen de estructuración del proyecto).

12.- Teniendo Vue configurado, vamos a crear los componentes que utilizaremos para el ejercicio:

13.- Primero, vamos a crear el componente Menu.vue:

Dicho componente será el que redireccione tanto al componente Formulario.vue como a ListadoArchivos.vue cuando se pulse en su respectivo enlace (en este caso es router-link, ya que es el modo de navegación en Vue).

14.- Para poder hacer operativo dicha navegación, debemos añadir el objeto VueRouter y los componentes en el archivo main.js:

En este archivo añadimos además Bootstrap para poder utilizarlo, hay más formas pero esta es una de ellas. Para utilizar los archivos CSS de Bootstrap debemos importarlos en el componente principal App.vue. Además de Bootstrap, en dicho componente añadimos el componente Menu.vue para que aparezca el menú fijo y la etiqueta <router-view> para que funcione finalmente la navegación en el proyecto:

15.- Teniendo la navegación montada, entonces podemos comenzar con crear el componente Formulario.vue:

Lo que hacemos en esta primera parte, correspondiente al <template>, es crear un formulario cuyo enctype sea tipo «multipart/form-data«. Esto es importante porque le estamos indicando al formulario que el valor (en este caso archivo) que le enviaremos será de tipo FormData().

Otro detalle a tener en cuenta es en <input>, cuando realicemos un evento de cambio (es decir, que cambie el valor que tiene. Por ejemplo: de null pase a Archivo1.pdf…) entonces llama al método buscarArchivo para realizar algo que veremos a continuación en las siguientes partes del componente:

16.- Finalmente, vamos a crear el último componente llamado ListadoArchivos.vue:

Vamos a mostrar en una tabla el nombre, la extensión y el tamaño del archivo que ha sido almacenado en el servidor cuando lo subimos por el formulario. Con la siguiente imagen veremos cómo hacerlo:

17.- Tras tener todo creado, entonces utilizando Cmder (o CMD) vamos a dirigirnos a la carpeta de nuestro proyecto vue llamada formulariovue y vamos a ejecutar el comando: npm run build.

18.- Realizado el montaje de nuestro proyecto, veremos que ahora sí que nos aparece la carpeta dist, de hecho aparecerá actualizada cada vez que montemos nuestro proyecto. Y si todo se ha realizado correctamente entonces nos vamos a dirigir a la carpeta API usando Cmder y vamos a ejecutar el comando: npm run dev.

19.- Accediendo al http://localhost:3080 nos aparecerá nuestro proyecto ya montado. Vamos a hacer la prueba de insertar un archivo al enlace llamado Insertar archivo:

20.- Cuando pulsemos al botón, si se ha realizado bien la subida del archivo al servidor, entonces nos redireccionará a la ruta «/listadoarchivos» con la tabla:

Me ha resultado algo complicado de llegar a esta resolución debido a que no hay mucha información concreta de cómo desplegar un proyecto Vue en Node.js y poder crear la comunicación entre estos. De hecho cuesta comprender algunas de las dependencias que añadimos a los proyectos hasta que no lo vas probando por ti mismo.

Explicando ese aspecto de dificultad al momento de recabar información y/o conocimientos para poder empezar a realizar un ejercicio de este calibre, la solución a esto es el interés de más personas como yo que deseen poder solventar las dudas de otros que se ven en la situación que, tanto como yo, como otros se vieron al plantear éste ejercicio sin conocimiento alguno.

Autor/a: Maria Adela España Moya.

Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma.

Centro: Tajamar.

Año académico: 2021-2022

Código/ recursos utilizados/ Otros datos de interés:https://github.com/MariaAdel-22/ejercicioAPI_VUE