Tutorial: Hochladen von Bilddaten in die Cloud mit Azure StorageTutorial: Upload image data in the cloud with Azure Storage

Dieses Tutorial ist der erste Teil einer Serie.This tutorial is part one of a series. In diesem Tutorial wird beschrieben, wie eine Web-App bereitgestellt wird, für die die Azure Storage-Clientbibliothek zum Hochladen von Bildern in ein Speicherkonto verwendet wird.In this tutorial, you will learn how to deploy a web app that uses the Azure Storage Client Library to upload images to a storage account. Nachdem Sie das Tutorial durchgearbeitet haben, verfügen Sie über eine Web-App, mit der Bilder in Azure-Speicher abgelegt und daraus angezeigt werden.When you're finished, you'll have a web app that stores and displays images from Azure storage.

Im ersten Teil der Serie lernen Sie Folgendes:In part one of the series, you learn how to:

  • Speicherkonto erstellenCreate a storage account
  • Erstellen eines Containers und Festlegen von BerechtigungenCreate a container and set permissions
  • Abrufen eines ZugriffsschlüsselsRetrieve an access key
  • Bereitstellen einer Web-App in AzureDeploy a web app to Azure
  • Konfigurieren von App-EinstellungenConfigure app settings
  • Interagieren mit der Web-AppInteract with the web app

VoraussetzungenPrerequisites

Sie benötigen ein Azure-Abonnement, um dieses Tutorial durcharbeiten zu können.To complete this tutorial, you need an Azure subscription. Erstellen Sie ein kostenloses Konto, bevor Sie beginnen.Create a free account before you begin.

Verwenden von Azure Cloud ShellUse Azure Cloud Shell

Azure hostet Azure Cloud Shell, eine interaktive Shell-Umgebung, die Sie über Ihren Browser nutzen können.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell ermöglicht die Verwendung von bash oder PowerShell, um mit Azure-Diensten zu arbeiten.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Sie können die vorinstallierten Befehle von Cloud Shell verwenden, um den Code in diesem Artikel auszuführen, ohne etwas in Ihrer lokalen Umgebung installieren zu müssen.You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Starten von Azure Cloud Shell:To launch Azure Cloud Shell:

OptionOption Beispiel/LinkExample/Link
Klicken Sie in der rechten oberen Ecke eines Codeblocks auf Ausprobieren.Select Try It in the upper-right corner of a code block. Durch die Auswahl von Ausprobieren wird der Code nicht automatisch in Cloud Shell kopiert.Selecting Try It doesn't automatically copy the code to Cloud Shell. Beispiel für „Testen Sie es.“ für Azure Cloud Shell
Rufen Sie https://shell.azure.com auf, oder wählen Sie die Schaltfläche Cloud Shell starten, um Cloud Shell im Browser zu öffnen.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. Starten von Cloud Shell in einem neuen FensterLaunch Cloud Shell in a new window
Wählen Sie im Azure-Portal oben rechts in der Menüleiste die Schaltfläche Cloud Shell.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Cloud Shell-Schaltfläche im Azure-Portal

Ausführen des Codes in diesem Artikel in Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Öffnen Sie Cloud Shell.Open Cloud Shell.
  2. Wählen Sie die Schaltfläche Kopieren für einen Codeblock, um den Code zu kopieren.Select the Copy button on a code block to copy the code.
  3. Fügen Sie den Code mit STRG+UMSCHALT+V unter Windows und Linux oder Cmd+UMSCHALT+V unter macOS in die Cloud Shell-Sitzung ein.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.
  4. Drücken Sie die EINGABETASTE, um den Code auszuführen.Press Enter to run the code.

Falls Sie die CLI lokal installieren und verwenden möchten, müssen Sie für dieses Tutorial die Azure CLI-Version 2.0.4 oder höher ausführen.To install and use the CLI locally, this tutorial requires that you run the Azure CLI version 2.0.4 or later. Führen Sie az --version aus, um die Version zu finden.Run az --version to find the version. Installations- und Upgradeinformationen finden Sie bei Bedarf unter Installieren von Azure CLI.If you need to install or upgrade, see Install the Azure CLI.

Erstellen einer RessourcengruppeCreate a resource group

Erstellen Sie mit dem Befehl az group create eine Ressourcengruppe.Create a resource group with the az group create command. Eine Azure-Ressourcengruppe ist ein logischer Container, in dem Azure-Ressourcen bereitgestellt und verwaltet werden.An Azure resource group is a logical container into which Azure resources are deployed and managed.

Im folgenden Beispiel wird eine Ressourcengruppe namens myResourceGroup erstellt.The following example creates a resource group named myResourceGroup.

az group create --name myResourceGroup --location southeastasia 

Speicherkonto erstellenCreate a storage account

Das Beispiel lädt Bilder in einen Blob-Container in einem Azure Storage-Konto hoch.The sample uploads images to a blob container in an Azure Storage account. Ein Speicherkonto stellt einen eindeutigen Namespace zum Speichern Ihrer Azure Storage-Datenobjekte sowie für den Zugriff darauf bereit.A storage account provides a unique namespace to store and access your Azure storage data objects. Erstellen Sie ein Speicherkonto in der Ressourcengruppe, die Sie erstellt haben, indem Sie den Befehl az storage account create verwenden.Create a storage account in the resource group you created by using the az storage account create command.

Wichtig

In Teil 2 des Tutorials verwenden Sie Azure Event Grid mit Blob Storage.In part 2 of the tutorial, you use Azure Event Grid with Blob storage. Erstellen Sie Ihr Speicherkonto in einer Azure-Region, die Event Grid unterstützt.Make sure to create your storage account in an Azure region that supports Event Grid. Eine Liste mit den unterstützten Regionen finden Sie unter Azure-Produkte nach Region.For a list of supported regions, see Azure products by region.

Ersetzen Sie im folgenden Befehl den Platzhalter <blob_storage_account> durch Ihren eigenen global eindeutigen Namen für das Blob Storage-Konto.In the following command, replace your own globally unique name for the Blob storage account where you see the <blob_storage_account> placeholder.

blobStorageAccount=<blob_storage_account>

az storage account create --name $blobStorageAccount \
--location southeastasia --resource-group myResourceGroup \
--sku Standard_LRS --kind blobstorage --access-tier hot 

Erstellen von Blob Storage-ContainernCreate Blob storage containers

Die App verwendet zwei Container im Blob Storage-Konto.The app uses two containers in the Blob storage account. Container ähneln Ordnern und Speicherblobs.Containers are similar to folders and store blobs. In den Container images lädt die App Bilder mit voller Auflösung hoch.The images container is where the app uploads full-resolution images. In einem späteren Teil der Reihe lädt eine Azure-Funktionen-App Miniaturansichten der Bilder mit angepasster Größe in den Container thumbnails hoch.In a later part of the series, an Azure function app uploads resized image thumbnails to the thumbnails container.

Rufen Sie mit dem Befehl az storage account keys list den Speicherkontoschlüssel ab.Get the storage account key by using the az storage account keys list command. Verwenden Sie anschließend diesen Schlüssel, um mit dem Befehl az storage container create zwei Container zu erstellen.Then, use this key to create two containers with the az storage container create command.

Der öffentliche Zugriff für den Container images ist auf off festgelegt.The images container's public access is set to off. Der öffentliche Zugriff für den Container thumbnails ist auf container festgelegt.The thumbnails container's public access is set to container. Bei der Einstellung container für den öffentlichen Zugriff können Benutzer, die die Webseite besuchen, die Miniaturansichten anzeigen.The container public access setting permits users who visit the web page to view the thumbnails.

blobStorageAccountKey=$(az storage account keys list -g myResourceGroup \
-n $blobStorageAccount --query [0].value --output tsv)

az storage container create -n images --account-name $blobStorageAccount \
--account-key $blobStorageAccountKey --public-access off

az storage container create -n thumbnails --account-name $blobStorageAccount \
--account-key $blobStorageAccountKey --public-access container

echo "Make a note of your Blob storage account key..."
echo $blobStorageAccountKey

Notieren Sie sich den Namen und Schlüssel des Blob Storage-Kontos.Make a note of your Blob storage account name and key. Die Beispiel-App verwendet diese Einstellungen zum Herstellen der Verbindung mit dem Speicherkonto zum Hochladen der Bilder.The sample app uses these settings to connect to the storage account to upload the images.

Wie erstelle ich einen Plan?Create an App Service plan

Ein App Service-Plan gibt den Standort, die Größe und die Funktionen der Webserverfarm an, die Ihre App hostet.An App Service plan specifies the location, size, and features of the web server farm that hosts your app.

Erstellen Sie mit dem Befehl az appservice plan create einen App Service-Plan.Create an App Service plan with the az appservice plan create command.

Im folgenden Beispiel wird ein App Service-Plan namens myAppServicePlan mit dem Tarif Free erstellt:The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku Free

Erstellen einer Web-AppCreate a web app

Die Web-App umfasst einen Hostingort für den Code der Beispiel-App, der aus dem GitHub-Beispielrepository bereitgestellt wird.The web app provides a hosting space for the sample app code that's deployed from the GitHub sample repository. Erstellen Sie eine Web-App im App Service-Plan myAppServicePlan mit dem Befehl az webapp create.Create a web app in the myAppServicePlan App Service plan with the az webapp create command.

Ersetzen Sie im folgenden Befehl <web_app> durch einen eindeutigen Namen.In the following command, replace <web_app> with a unique name. Gültige Zeichen sind a-z, 0-9 und -.Valid characters are a-z, 0-9, and -. Ist <web_app> nicht eindeutig, wird die folgende Fehlermeldung angezeigt: Eine Website mit dem angegebenen Namen <web_app> ist bereits vorhanden.If <web_app> is not unique, you get the error message: Website with given name <web_app> already exists. Die Standard-URL der Web-App lautet https://<web_app>.azurewebsites.net.The default URL of the web app is https://<web_app>.azurewebsites.net.

webapp=<web_app>

az webapp create --name $webapp --resource-group myResourceGroup --plan myAppServicePlan

Bereitstellen der Beispiel-App aus dem GitHub-RepositoryDeploy the sample app from the GitHub repository

App Service unterstützt verschiedene Möglichkeiten zum Bereitstellen von Inhalt für eine Web-App.App Service supports several ways to deploy content to a web app. In diesem Tutorial stellen Sie die Web-App aus einem öffentlichen GitHub-Beispielrepository bereit.In this tutorial, you deploy the web app from a public GitHub sample repository. Konfigurieren Sie die GitHub-Bereitstellung für die Web-App mit dem Befehl az webapp deployment source config.Configure GitHub deployment to the web app with the az webapp deployment source config command.

Das Beispielprojekt enthält eine ASP.NET MVC-App.The sample project contains an ASP.NET MVC app. Die App akzeptiert ein Bild, speichert es unter einem Speicherkonto und zeigt Bilder aus einem Container mit Miniaturansichten an.The app accepts an image, saves it to a storage account, and displays images from a thumbnail container. Die Web-App verwendet die Namespaces Microsoft.Azure.Storage, Microsoft.Azure.Storage.Blob und „Microsoft.Azure.Storage.Auth“ aus der Azure Storage-Clientbibliothek für die Interaktion mit Azure Storage.The web app uses the Microsoft.Azure.Storage, Microsoft.Azure.Storage.Blob, and the Microsoft.Azure.Storage.Auth namespaces from the Azure Storage client library to interact with Azure storage.

az webapp deployment source config --name $webapp \
--resource-group myResourceGroup --branch master --manual-integration \
--repo-url https://github.com/Azure-Samples/storage-blob-upload-from-webapp

Konfigurieren von Einstellungen für Web-AppsConfigure web app settings

Die Beispiel-Web-App verwendet die Azure Storage-Clientbibliothek zum Anfordern von Zugriffstoken, die zum Hochladen von Bildern verwendet werden.The sample web app uses the Azure Storage Client Library to request access tokens, which are used to upload images. Die vom Storage SDK verwendeten Anmeldeinformationen des Speicherkontos werden in den App-Einstellungen für die Web-App festgelegt.The storage account credentials used by the Storage SDK are set in the app settings for the web app. Fügen Sie der bereitgestellten App mit dem Befehl az webapp config appsettings set App-Einstellungen hinzu.Add app settings to the deployed app with the az webapp config appsettings set command.

az webapp config appsettings set --name $webapp --resource-group myResourceGroup \
--settings AzureStorageConfig__AccountName=$blobStorageAccount \
AzureStorageConfig__ImageContainer=images  \
AzureStorageConfig__ThumbnailContainer=thumbnails \
AzureStorageConfig__AccountKey=$blobStorageAccountKey  

Nachdem Sie die Web-App bereitgestellt und konfiguriert haben, können Sie die Funktionalität zum Hochladen von Bildern in der App testen.After you deploy and configure the web app, you can test the image upload functionality in the app.

Hochladen von ImagesUpload an image

Navigieren Sie zum Testen der Web-App zur URL Ihrer veröffentlichten App.To test the web app, browse to the URL of your published app. Die Standard-URL der Web-App lautet https://<web_app>.azurewebsites.net.The default URL of the web app is https://<web_app>.azurewebsites.net.

Wählen Sie den Bereich Fotos hochladen aus, um eine Datei auszuwählen und hochzuladen, oder ziehen Sie eine Datei in den Bereich.Select the Upload photos region to select and upload a file, or drag a file onto the region. Das Bild wird nicht mehr angezeigt, wenn es erfolgreich hochgeladen wurde.The image disappears if successfully uploaded. Der Abschnitt Generierte Miniaturansichten bleibt leer, bis er später in diesem Thema getestet wird.The Generated Thumbnails section will remain empty until we test it later in this topic.

Hochladen von Fotos in .NET

Im Beispielcode wird der Task UploadFiletoStorage in der Datei Storagehelper.cs verwendet, um die Bilder mit der UploadFromStreamAsync-Methode in den Container images des Speicherkontos hochzuladen.In the sample code, the UploadFiletoStorage task in the Storagehelper.cs file is used to upload the images to the images container within the storage account using the UploadFromStreamAsync method. Das folgende Codebeispiel enthält einen Task „UploadFiletoStorage“.The following code sample contains the UploadFiletoStorage task.

public static async Task<bool> UploadFileToStorage(Stream fileStream, string fileName, AzureStorageConfig _storageConfig)
{
    // Create storagecredentials object by reading the values from the configuration (appsettings.json)
    StorageCredentials storageCredentials = new StorageCredentials(_storageConfig.AccountName, _storageConfig.AccountKey);

    // Create cloudstorage account by passing the storagecredentials
    CloudStorageAccount storageAccount = new CloudStorageAccount(storageCredentials, true);

    // Create the blob client.
    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

    // Get reference to the blob container by passing the name by reading the value from the configuration (appsettings.json)
    CloudBlobContainer container = blobClient.GetContainerReference(_storageConfig.ImageContainer);

    // Get the reference to the block blob from the container
    CloudBlockBlob blockBlob = container.GetBlockBlobReference(fileName);

    // Upload the file
    await blockBlob.UploadFromStreamAsync(fileStream);

    return await Task.FromResult(true);
}

Die folgenden Klassen und Methoden werden in den vorhergehenden Tasks verwendet:The following classes and methods are used in the preceding task:

KlasseClass MethodeMethod
StorageCredentialsStorageCredentials
CloudStorageAccountCloudStorageAccount CreateCloudBlobClientCreateCloudBlobClient
CloudBlobClientCloudBlobClient GetContainerReferenceGetContainerReference
CloudBlobContainerCloudBlobContainer GetBlockBlobReferenceGetBlockBlobReference
CloudBlockBlobCloudBlockBlob UploadFromStreamAsyncUploadFromStreamAsync

Sicherstellen, dass das Bild im Speicherkonto angezeigt wirdVerify the image is shown in the storage account

Melden Sie sich beim Azure-Portal an.Sign in to the Azure portal. Wählen Sie im linken Menü Speicherkonten aus, und wählen Sie dann den Namen Ihres Speicherkontos aus.From the left menu, select Storage accounts, then select the name of your storage account. Wählen Sie unter Blob-Dienst die Option Blobs und dann den Container images.Under Blob Service, select Blobs, then select the images container.

Stellen Sie sicher, dass das Bild im Container angezeigt wird.Verify the image is shown in the container.

Liste der Container mit Images im Azure-Portal

Testen der MiniaturansichtenanzeigeTest thumbnail viewing

Zum Testen der Miniaturansichtenanzeige laden Sie ein Bild in den Container thumbnails hoch. Auf diese Weise soll überprüft werden, ob die App den Container thumbnails lesen kann.To test thumbnail viewing, you'll upload an image to the thumbnails container to check whether the app can read the thumbnails container.

Melden Sie sich beim Azure-Portal an.Sign in to the Azure portal. Wählen Sie im linken Menü Speicherkonten aus, und wählen Sie dann den Namen Ihres Speicherkontos aus.From the left menu, select Storage accounts, then select the name of your storage account. Wählen Sie unter Blob-Dienst die Option Blobs und dann den Container thumbnails.Under Blob Service, select Blobs, then select the thumbnails container. Klicken Sie auf Hochladen, um den Bereich Blob hochladen zu öffnen.Select Upload to open the Upload blob pane.

Wählen Sie mit der Dateiauswahl eine Datei aus, und wählen Sie dann die Option Hochladen.Choose a file with the file picker and select Upload.

Navigieren Sie wieder zu Ihrer App, um zu überprüfen, ob das in den Container thumbnails hochgeladene Bild sichtbar ist.Navigate back to your app to verify that the image uploaded to the thumbnails container is visible.

Im zweiten Teil der Reihe automatisieren Sie die Erstellung der Miniaturansicht, sodass Sie dieses Image nicht benötigen.In part two of the series, you automate thumbnail image creation so you don't need this image. Wählen Sie im Azure-Portal im Container thumbnails das Bild aus, das Sie hochgeladen haben, und klicken Sie anschließend auf Löschen, um das Bild zu löschen.In the thumbnails container in the Azure portal, select the image you uploaded and select Delete to delete the image.

Sie können CDN aktivieren, um Inhalt aus Ihrem Azure-Speicherkonto zwischenzuspeichern.You can enable CDN to cache content from your Azure storage account. Weitere Informationen dazu, wie Sie CDN mit Ihrem Azure-Speicherkonto aktivieren, finden Sie unter Integrieren eines Azure-Speicherkontos in CDN.For more information about how to enable CDN with your Azure storage account, see Integrate an Azure storage account with Azure CDN.

Nächste SchritteNext steps

Im ersten Teil der Reihe haben Sie erfahren, wie Sie eine Web-App für die Interaktion mit Speicher konfigurieren.In part one of the series, you learned how to configure a web app to interact with storage.

Fahren Sie mit dem zweiten Teil der Reihe fort, um sich darüber zu informieren, wie Event Grid zum Auslösen einer Azure-Funktion zur Größenänderung eines Bilds verwendet wird.Go on to part two of the series to learn about using Event Grid to trigger an Azure function to resize an image.