使用 Azure 存储在云中上传图像数据

本教程是一个系列中的第一部分。 本教程演示如何部署一个 Web 应用,它使用 Azure 存储客户端库将图像上传到存储帐户。 完成后,你将具有一个通过 Azure 存储来存储和显示图像的 Web 应用。

图像容器视图

在该系列的第一部分中,你将学习如何:

  • 创建存储帐户
  • 创建容器并设置权限
  • 检索访问密钥
  • 配置应用程序设置
  • 将 Web 应用部署到 Azure
  • 与 Web 应用进行交互

如果选择在本地安装并使用 CLI,本教程要求运行 Azure CLI 2.0.4 或更高版本。 运行 az --version 即可查找版本。 如果需要进行安装或升级,请参阅安装 Azure CLI 2.0

创建资源组

使用 az group create 命令创建资源组。 Azure 资源组是在其中部署和管理 Azure 资源的逻辑容器。

以下示例创建名为 myResourceGroup 的资源组。

az group create --name myResourceGroup --location chinanorth 

创建存储帐户

此示例将图像上传到 Azure 存储帐户中的 blob 容器。 存储帐户提供唯一的命名空间来存储和访问 Azure 存储数据对象。 使用 az storage account create 命令在创建的资源组中创建存储帐户。

Important

在本教程的第 2 部分中,你会对 blob 存储使用事件订阅。 当前仅对美国中西部和美国西部 2 的 Blob 存储帐户支持事件订阅。 由于存在此限制,因此必须创建由示例应用用于存储图像和缩略图的 Blob 存储帐户。

在以下命令中,请将 <blob_storage_account> 占位符替换成自己的 Blob 存储帐户的全局唯一名称。

az storage account create --name <blob_storage_account> \
--location chinanorth --resource-group myResourceGroup \
--sku Standard_LRS --kind blobstorage --access-tier hot 

创建 blob 存储容器

应用使用 Blob 存储帐户中的两个容器。 这些容器类似于文件夹,用于存储 blob。 images 容器是应用在其中上传完整分辨率图像的位置。

使用 az storage account keys list 命令获取存储帐户密钥。 然后使用此密钥通过 az storage container create 命令创建两个容器。

在此例中,<blob_storage_account> 是你创建的 Blob 存储帐户的名称。 images 容器公共访问权限设置为 off,thumbnails 容器公共访问权限设置为 containercontainer 公共访问权限设置使访问网页的人员可以查看缩略图。

blobStorageAccount=<blob_storage_account>

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 

记下 blob 存储帐户名称和密钥。 示例应用使用这些设置连接到存储帐户以上传图像。

创建应用服务计划

应用服务计划指定托管应用的 Web 服务器场的位置、大小和功能。

使用 az appservice plan create 命令创建应用服务计划。

以下示例在免费定价层中创建名为 myAppServicePlan 的应用服务计划:

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

创建 Web 应用

Web 应用为从 GitHub 示例存储库部署的示例应用代码提供承载空间。 使用 az webapp create 命令在 myAppServicePlan 应用服务计划中创建一个 Web 应用

在以下命令中,将 <web_app> 替换为唯一名称(有效字符是 a-z0-9-)。 如果 <web_app> 不是唯一名称,将收到错误消息:“具有给定名称 <web_app> 的网站已存在”。 Web 应用的默认 URL 为 https://<web_app>.chinacloudsites.cn

az webapp create --name <web_app> --resource-group myResourceGroup --plan myAppServicePlan 

从 GitHub 存储库部署示例应用

应用服务支持通过多种方式将内容部署到 Web 应用。 在本教程中,将从公共 GitHub 示例存储库部署 Web 应用。 使用 az webapp deployment source config 命令配置 Web 应用的 GitHub 部署。 将 <web_app> 替换为在上一步中创建的 Web 应用的名称。

示例项目包含一个 ASP.NET MVC 应用,它接受图像,将其保存到存储帐户,然后从缩略图容器显示图像。 Web 应用使用 Azure 存储客户端库中的 Microsoft.WindowsAzure.StorageMicrosoft.WindowsAzure.Storage.BlobMicrosoft.WindowsAzure.Storage.Auth 命名空间与 Azure 存储进行交互。

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

配置 Web 应用设置

示例 Web 应用使用 Azure 存储客户端库请求用于上传图像的访问令牌。 在 Web 应用的应用设置中设置存储 SDK 使用的存储帐户凭据。 使用 az webapp config appsettings set 命令将应用设置添加到已部署的应用。

在下面的命令中,<blob_storage_account> 是 Blob 存储帐户的名称,<blob_storage_key> 是关联密钥。 将 <web_app> 替换为在上一步中创建的 Web 应用的名称。

az webapp config appsettings set --name <web_app> --resource-group myResourceGroup \
--settings AzureStorageConfig__AccountName=<blob_storage_account> \
AzureStorageConfig__ImageContainer=images  \
AzureStorageConfig__ThumbnailContainer=thumbnails \
AzureStorageConfig__AccountKey=<blob_storage_key>  

Web 应用已部署并配置之后,你可以在应用中测试图像上传功能。

上传映像

若要测试 Web 应用,请浏览到已发布应用的 URL。 Web 应用的默认 URL 为 https://<web_app>.chinacloudsites.cn。 选择“上传照片”区域以选择并上传文件,或是将文件拖放到该区域上。 如果成功上传,图像会消失。

ImageResizer 应用

在示例代码中,Storagehelper.cs 文件中的 UploadFiletoStorage 任务用于通过 UploadFromStreamAsync 方法将图像上传到存储帐户中的 images 容器。 下面的代码示例包含 UploadFiletoStorage 任务。

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

以下是用于前一任务的类和方法:

方法
StorageCredentials
CloudStorageAccount CreateCloudBlobClient
CloudBlobClient GetContainerReference
CloudBlobContainer GetBlockBlobReference
CloudBlockBlob UploadFromStreamAsync

验证图像是否显示在存储帐户中

登录到 Azure 门户。 从左侧菜单中,选择“存储帐户”,然后选择你的存储帐户的名称。 在“概览”下,选择“images”容器。

验证图像是否显示在该容器中。

图像容器视图

测试缩略图查看

为了测试缩略图查看,你会将图像上传到缩略图容器,以确保应用程序可以读取缩略图容器。

登录到 Azure 门户。 从左侧菜单中,选择“存储帐户”,然后选择你的存储帐户的名称。 选择“Blob 服务”下的“容器”,然后选择“thumbnails”容器。 选择“上传”以打开“上传 blob”窗格。

使用文件选取器选择文件,然后选择“上传”。

导航回到应用,以验证上传到 thumbnails 容器的图像是否可见。

图像容器视图

在 Azure 门户中的 thumbnails 容器中,选择上传的图像,然后选择“删除”以删除图像。 在本系列的第二部分中,你会自动创建缩略图图像,因此无需此测试图像。

后续步骤

在本系列的第一部分中,你了解了如何配置与存储交互的 Web 应用,例如如何:

  • 创建存储帐户
  • 创建容器并设置权限
  • 检索访问密钥
  • 配置应用程序设置
  • 将 Web 应用部署到 Azure
  • 与 Web 应用进行交互