Ejercicio: Carga de una imagen en la cuenta de Azure Storage

Completado

Ahora se agregará código para cargar una imagen en la cuenta de Azure Storage. En este ejemplo, vamos a cargar la siguiente imagen en el contenedor de Azure Storage.

Si está trabajando en su máquina local, haga clic con el botón derecho en esta imagen y guárdela en la misma carpeta en la que está la aplicación.

1. Si está trabajando en el entorno de espacio aislado de Microsoft Learn, ejecute el siguiente comando en la carpeta de la aplicación para descargar la imagen en el espacio aislado:

   wget https://github.com/MicrosoftDocs/mslearn-connect-app-to-azure-storage/blob/main/images/docs-and-friends-selfie-stick.png?raw=true -O docs-and-friends-selfie-stick.png
   

   En ambos casos, el nombre de la imagen debe ser docs-and-friends-selfie-stick.png.

Carga de una imagen en almacenamiento de blobs

Para trabajar con objetos de blob individuales en la cuenta de Azure Storage, se usa un objeto BlobClient. Para obtener un objeto BlobClient, llame al método GetBlobClient en el objeto BlobContainerClient del contenedor donde se almacenará el blob. Al llamar al método GetBlobClient, también se proporciona un nombre para el blob en el contenedor. En el ejemplo, el nombre del blob será el mismo que el del archivo.

1. Una vez que tenga un objeto BlobClient, puede llamar al método Upload para cargar un archivo en Azure Blob Storage. Agregue el código siguiente al archivo Program.cs:

   string blobName = "docs-and-friends-selfie-stick";
   string fileName = "docs-and-friends-selfie-stick.png";
   BlobClient blobClient = container.GetBlobClient(blobName);
   blobClient.Upload(fileName, true);
   

   El segundo argumento del método Upload especifica si se puede sobrescribir un objeto de blob existente con el mismo nombre. De manera predeterminada, este valor es false. En este caso, se especificará true para permitir que el programa se ejecute varias veces.

Enumeración de los objetos de un contenedor de Azure Blob Storage

Para comprobar que el programa ha funcionado, se usará otra funcionalidad del SDK de Azure Storage Blob para enumerar los objetos almacenados en un contenedor de almacenamiento de blobs. Esto se puede hacer mediante una llamada al método GetBlobs en un objeto BlobContainerClient. El método GetBlobs devuelve una lista paginable de objetos BlobItem que contienen datos sobre cada blob del contenedor.

1. Agregue el siguiente código al programa después del código que agregó previamente y guarde el archivo:

   var blobs = container.GetBlobs();
   foreach (var blob in blobs)
   {
       Console.WriteLine($"{blob.Name} --> Created On: {blob.Properties.CreatedOn:yyyy-MM-dd HH:mm:ss}  Size: {blob.Properties.ContentLength}");
   }
   

   Este código llama a GetBlobs en el objeto BlobContainerClient para el contenedor photos. Después, itera por cada blob, del que imprime el nombre, la fecha y la hora de creación, y el tamaño. Al ejecutar el programa, este código debe aparecer como una sola línea para la imagen que se ha cargado.

2. Si quiere comprobar el trabajo, el archivo Program.cs final debe ser similar al siguiente.

   using System;
   using Microsoft.Extensions.Configuration;
   using System.IO;
   using Azure.Storage.Blobs;
   
   namespace PhotoSharingApp
   {
       class Program
       {
           static void Main(string[] args)
           {
               var builder = new ConfigurationBuilder()
                   .SetBasePath(Directory.GetCurrentDirectory())
                   .AddJsonFile("appsettings.json");
   
               var configuration = builder.Build();
   
               // Get a connection string to our Azure Storage account.
               var connectionString = configuration.GetConnectionString("StorageAccount");
   
               // Get a reference to the container client object so you can create the "photos" container
               string containerName = "photos";
               BlobContainerClient container = new BlobContainerClient(connectionString, containerName);
               container.CreateIfNotExists();
   
               // Uploads the image to Blob storage.  If a blb already exists with this name it will be overwritten
               string blobName = "docs-and-friends-selfie-stick";
               string fileName = "docs-and-friends-selfie-stick.png";
               BlobClient blobClient = container.GetBlobClient(blobName);
               blobClient.Upload(fileName, true);
   
               // List out all the blobs in the container
               var blobs = container.GetBlobs();
               foreach (var blob in blobs)
               {
                   Console.WriteLine($"{blob.Name} --> Created On: {blob.Properties.CreatedOn:yyyy-MM-dd HH:mm:ss}  Size: {blob.Properties.ContentLength}");
               }
           }
       }
   }
   

Ejecución la aplicación

1. Compile y ejecute la aplicación para comprobar que todo funciona y cargue la imagen en Azure Blob Storage.

   Nota:

   Compruebe que se encuentra en el directorio PhotoSharingApp.

   dotnet run
   

Enhorabuena

Ha aprendido los aspectos básicos de trabajar con el paquete del SDK Azure Storage Blobs y Azure Blob Storage. Si quiere, puede profundizar más mediante la creación de otro contenedor, la carga de más imágenes en la cuenta de almacenamiento o la eliminación de una imagen. Puede obtener más información en la página de GitHub de la biblioteca cliente Azure Storage Blobs para .NET.

Carga de una imagen en almacenamiento de blobs

Para trabajar con objetos de blob en el contenedor de Azure Storage, se usa un objeto BlockBlobClient. El objeto BlockBlobClient tiene métodos para cargar, descargar, enumerar y eliminar objetos de blob en un contenedor. Para obtener BlockBlobObject, llame al método getBlockBlobClient en el objeto ContainerClient. Después, puede usar el método uploadFile para cargar la imagen en Azure Storage.

1. Agregue este código al archivo de programa index.js inmediatamente después del código que crea el contenedor:

   const filename = 'docs-and-friends-selfie-stick.png';
   const blockBlobClient = containerClient.getBlockBlobClient(filename);
   blockBlobClient.uploadFile(filename);
   

Enumeración de los objetos de un contenedor de Azure Blob Storage

1. Para comprobar que el código funciona, puede llamar al método listBlobsFlat en el objeto ContainerClient del programa. Agregue este código al archivo index.js y guarde el archivo:

   let blobs = containerClient.listBlobsFlat();
   let blob = await blobs.next();
   while (!blob.done) {
       console.log(`${blob.value.name} --> Created: ${blob.value.properties.createdOn}   Size: ${blob.value.properties.contentLength}`);
       blob = await blobs.next();
   }
   

   Este código imprimirá todos los blobs del contenedor de Azure Blob Storage con la fecha de creación del blob y su tamaño. En el programa, el código debe imprimir una fila que represente la imagen única que se ha cargado.

2. El archivo final debería tener este aspecto.

   #!/usr/bin/env node
   require('dotenv').config();
   
   const { BlobServiceClient } = require("@azure/storage-blob");
   
   const storageAccountConnectionString = process.env.AZURE_STORAGE_CONNECTION_STRING;
   const blobServiceClient = BlobServiceClient.fromConnectionString(storageAccountConnectionString);
   
   async function main() {
   // Create a container (folder) if it does not exist
   const containerName = 'photos';
   const containerClient = blobServiceClient.getContainerClient(containerName);
   const containerExists = await containerClient.exists()
   if ( !containerExists) {
       const createContainerResponse = await containerClient.createIfNotExists();
       console.log(`Create container ${containerName} successfully`, createContainerResponse.succeeded);
   }
   else {
       console.log(`Container ${containerName} already exists`);
   }
   
   // Upload the file
   const filename = 'docs-and-friends-selfie-stick.png';
   const blockBlobClient = containerClient.getBlockBlobClient(filename);
   blockBlobClient.uploadFile(filename);
   
   // Get a list of all the blobs in the container
   let blobs = containerClient.listBlobsFlat();
   let blob = await blobs.next();
   while (!blob.done) {
       console.log(`${blob.value.name} --> Created: ${blob.value.properties.createdOn}   Size: ${blob.value.properties.contentLength}`);
       blob = await blobs.next();
   }
   }
   main();
   

Ejecución de la aplicación

1. Compile y ejecute la aplicación.

   Nota:

   Compruebe que se encuentra en el directorio PhotoSharingApp.

   node index.js
   

   Sugerencia

   Si se produce un error sobre el uso de la palabra clave await, asegúrese de que ha agregado la palabra clave async a la definición de función main en el último paso de las instrucciones anteriores.

Enhorabuena

Ha aprendido los aspectos básicos de trabajar con la biblioteca cliente de Azure Storage Blob para JavaScript y Azure Blob Storage. Si quiere, puede profundizar más mediante la creación de otro contenedor, la carga de más imágenes en la cuenta de almacenamiento o la eliminación de una imagen. En la página de la biblioteca cliente de Azure Storage Blob para JavaScript de npm.js se ofrecen muchos ejemplos de cómo usar la biblioteca.

Continuar