Muy buenas, soy Andrés Otero estudiante del master Desarrollo Web Full Stack + MultiCloud + Multiplataforma en Tajamar, hoy os explicare como usar blob para almacenar nuestra imágenes, así como poder visualizarlas en nuestra app y eliminarlas.

Nuget necesarios para usar blob

Pasos a realizar en azure portal

Primero en el buscador buscamos, storage accounts:

Una vez hemos accedido, nos encontraremos una barra en la parte superior para crear un storage, además en la parte inferior podremos visualizar los otros storage que tengamos creados:

Le damos a create para crearnos un storage, una vez le demos nos aparecerá por un lado el grupo de recursos al que quiere ir dirigido y le tendremos que poner un nombre y ponerlo en West Europe:

Una vez realizados estos pasos le daremos a Review and Create y tendríamos nuestro storage.

Una vez creado nuestro storage accedemos a él, y nos metemos en sus container:

Nos crearemos un container para almacenar todas las imágenes que queramos en nuestro storage, para ello una vez dentro de containers le daremos a +Container para crearnos uno nuevo:

El container debe tener el nombre en MINÚSCULAS, y en el scroll seleccionaremos la opción de Blob

Una vez creado nuestro container podremos subirle imágenes manualmente o mediante código, para hacerlo manualmente le daremos a upload y seleccionaremos las que queramos de nuestro equipo:

Pasos a realizar en Mvc

Una vez montado nuestro blob tendremos que acceder a él a través de nuestro mvc, lo primero crearemos una carpeta llamada services que contendrá una clase llamada ServiceStorageBlobs.cs

En ServiceStorageBlobs nos crearemos tres métodos uno para eliminar las imágenes del blob, otro para subirlas e modificarlas y un último para recoger todos los nombres de nuestras imágenes almacenadas en el blob:

Una vez creados los métodos nos iremos a appsettings.json para poner la cadena de conexión de nuestro storage:

para obtener nuestra cadena de conexión nos iremos a nuestro portal de azure a nuestro storage y iremos al apartado de Access Keys:

Veremos que la connection string que es nuestra cadena sale con asteriscos(*):

para poder visualizarlo deberemos dar al ojo en la parte superior y así podremos saber cual es nuestra cadena de conexión:

Una vez colocada nuestra cadena de conexión, accedemos al startup:

Resolvemos las dependencias de nuestro service:

Por último en nuestro controller llamaríamos a los métodos de nuestro service:

Por último para visualizar nuestra imágenes en nuestro proyecto sobre el atributo src de nuestra imágenes colocaremos la url general de nuestras imágenes y en vez del nombre de la imagen al final de la url el nombre que hemos recogido con nuestro foreach:

Para poder recoger esta url nos iremos a nuestro storage, accedemos a una imagen la que queramos y copiamos la url que se nos proporciona:

Autor/a: Andrés Otero Figueiredo

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/Andrellu/PostImagenesAzure

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.