Vorherige

Nächste

Übung: Hochladen eines Bilds in Ihr Azure Storage-Konto

Abgeschlossen

Wir fügen nun Code zum Hochladen eines Bilds in unser Azure Storage-Konto hinzu. In diesem Beispiel laden wir das folgende Bild in unseren Azure Storage-Container hoch.

Wenn Sie auf dem lokalen Computer arbeiten, klicken Sie mit der rechten Maustaste auf dieses Bild und speichern Sie es im selben Ordner, in dem sich auch Ihre Anwendung befindet.

1. Wenn Sie in der Microsoft Learn Sandbox-Umgebung arbeiten, führen Sie den folgenden Befehl im Anwendungsordner aus, um das Bild in Ihre Sandbox herunterzuladen:

   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
   

   In beiden Fällen sollte der Name des Bilds docs-and-friends-selfie-stick.png lauten.

Hochladen eines Bilds in Blobspeicher

Zum Arbeiten mit einzelnen Blobobjekten in Ihrem Azure Storage-Konto verwenden Sie ein BlobClient-Objekt. Um ein BlobClient-Objekt abzurufen, rufen Sie die GetBlobClient-Methode für das BlobContainerClient-Objekt des Containers auf, in dem das Blob gespeichert wird. Wenn Sie die GetBlobClient-Methode aufrufen, geben Sie auch einen Namen für das Blob im Container an. In unserem Beispiel ist der Name des Blobs mit dem Namen der Datei identisch.

1. Nachdem Sie über ein BlobClient-Objekt verfügen, können Sie die Upload-Methode zum Hochladen einer Datei in Azure Blob Storage abrufen. Fügen Sie den folgenden Code in Ihre Datei Program.cs ein:

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

   Das zweite Argument in der Upload-Methode gibt an, ob ein vorhandenes Blobobjekt desselben Namens überschrieben werden kann. Standardmäßig ist dieser Wert auf false festgelegt. In diesem Fall geben wir true an, damit das Programm mehrmals ausgeführt werden kann.

Auflisten von Objekten in einem Azure Blob Storage-Container

Um zu überprüfen, ob unser Programm funktioniert hat, führen wir eine weitere Funktion des Azure Storage Blobs SDK aus, um die Objekte aufzulisten, die in einem Container im Blobspeicher gespeichert werden. Dies kann durch Aufrufen der GetBlobs-Methode für ein BlobContainerClient-Objekt erreicht werden. Die GetBlobs-Methode gibt eine Auslagerungsliste mit BlobItem-Objekten zurück, die Daten zu jedem Blob im Container enthalten.

1. Fügen Sie dem Programm nach dem zuvor hinzugefügten Code den folgenden Code hinzu und speichern Sie die Datei:

   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}");
   }
   

   Dieser Code ruft GetBlobs für das BlobContainerClient-Objekt für den Container photos auf. Anschließend werden die einzelnen Blobs durchlaufen, wobei der Name des Blobs, das Datum und die Uhrzeit der Erstellung des Blobs und die Größe des Blobs ausgegeben werden. Wenn Sie das Programm ausführen, sollte dieser Code für ein einzelnes hochgeladenes Bild in einer einzelnen Zeile angezeigt werden.

2. Die endgültige Version der Datei Program.cs sollte wie folgt aussehen, wenn Sie Ihre Arbeit überprüfen möchten.

   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}");
               }
           }
       }
   }
   

Ausführen der App

1. Erstellen Sie die Anwendung, und führen Sie sie aus, um zu überprüfen, ob alles funktioniert, und laden Sie Ihr Bild in Azure Blob Storage hoch.

   Hinweis

   Vergewissern Sie sich, dass Sie sich im Verzeichnis „PhotoSharingApp“ befinden.

   dotnet run
   

Herzlichen Glückwunsch!

Sie haben die Grundlagen der Arbeit mit dem SDK-Paket von Azure Storage Blobs und Azure Blob Storage kennengelernt. Wenn Sie die Anwendung ausbauen möchten, können Sie einen weiteren Container erstellen, mehr Bilder in Ihr Speicherkonto hochladen oder ein Bild löschen. Weitere Informationen finden Sie auf der GitHub-Seite der Azure Storage Blobs-Clientbibliothek für .NET.

Hochladen eines Bilds in Blobspeicher

Zum Arbeiten mit Blobobjekten in Ihrem Azure Storage-Container verwenden Sie ein BlockBlobClient-Objekt. Das BlockBlobClient-Objekt verfügt über Methoden zum Hochladen, Herunterladen, Auflisten und Löschen von Blobobjekten in einem Container. Um ein BlockBlobObject abzurufen, rufen Sie die getBlockBlobClient-Methode für das ContainerClient-Objekt auf. Anschließend können Sie die uploadFile-Methode verwenden, um das Bild in Azure Storage hochzuladen.

1. Fügen Sie diesen Code in Ihrer index.js-Anwendungsdatei direkt nach dem Code zum Erstellen des Containers hinzu:

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

Auflisten von Objekten in einem Azure Blob Storage-Container

1. Um zu überprüfen, ob der Code funktioniert, können wir die listBlobsFlat-Methode für das ContainerClient-Objekt in unserem Programm aufzurufen. Fügen Sie diesen Code der index.js-Datei hinzu und speichern Sie dann die Datei:

   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();
   }
   

   Mit diesem Code werden alle Blobs in unserem Azure Blob Storage-Container mit dem Datum, an dem das Blob erstellt wurde, und dessen Größe ausgegeben. Bei unserem Programm sollte mit diesem Code eine Zeile ausgegeben werden, die das von uns hochgeladene einzelne Bild repräsentiert.

2. Die endgültige Datei sollte wie folgt aussehen.

   #!/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();
   

Ausführen der App

1. Erstellen Sie die Anwendung, und führen Sie sie aus.

   Hinweis

   Vergewissern Sie sich, dass Sie sich im Verzeichnis „PhotoSharingApp“ befinden.

   node index.js
   

   Tipp

   Wenn Sie eine Fehlermeldung wegen der Verwendung des Schlüsselworts await erhalten, stellen Sie sicher, dass Sie im letzten Schritt der vorhergehenden Anweisungen das Schlüsselwort async der main-Funktionsdefinition hinzugefügt haben.

Herzlichen Glückwunsch!

Sie haben die Grundlagen der Arbeit mit der Azure Storage Blob-Clientbibliothek für JavaScript und Azure Blob Storage kennengelernt. Wenn Sie die Anwendung ausbauen möchten, können Sie einen weiteren Container erstellen, mehr Bilder in Ihr Speicherkonto hochladen oder ein Bild löschen. Die npm.js-Seite Azure Storage Blob Client Library for JavaScript enthält viele Beispiele für die Verwendung der Bibliothek.

Weiter