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

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

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

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

先决条件

需要一个 Azure 订阅才能完成此教程。 在开始之前创建一个试用帐户

若要在本地安装和使用 CLI,请运行 Azure CLI 2.0.4 或更高版本。 运行 az --version 即可查找版本。 如需进行安装或升级,请参阅安装 Azure CLI

创建资源组

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

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

New-AzResourceGroup -Name myResourceGroup -Location chinanorth

创建存储帐户

此示例将图像上传到 Azure 存储帐户中的 blob 容器。 存储帐户提供唯一的命名空间来存储和访问 Azure 存储数据对象。

重要

在本教程的第 2 部分中,你将 Azure 事件网格与 Blob 存储配合使用。 请确保在支持事件网格的 Azure 区域中创建你的存储帐户。 有关受支持区域的列表,请参阅 Azure 产品(按区域)

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

使用 New-AzStorageAccount 命令在创建的资源组中创建存储帐户。

$blobStorageAccount="<blob_storage_account>"

New-AzStorageAccount -ResourceGroupName myResourceGroup -Name $blobStorageAccount -SkuName Standard_LRS -Location chinanorth -Kind StorageV2 -AccessTier Hot

创建 Blob 存储容器

应用使用 Blob 存储帐户中的两个容器。 容器类似于文件夹,用于存储 blob。 images 容器是应用在其中上传完整分辨率图像的位置。 在本系列的后面部分,一个 Azure 函数应用会将重设大小后的图像缩略图上传到“缩略图”

images 容器的公共访问权限设置为 offthumbnails 容器的公共访问权限设置为 containercontainer 公共访问权限设置允许访问网页的用户查看缩略图。

使用 Get-AzStorageAccountKey 命令获取存储帐户密钥。 然后,使用此密钥通过 New-AzStorageContainer 命令创建两个容器。

$blobStorageAccountKey = (Get-AzStorageAccountKey -ResourceGroupName myResourceGroup -Name $blobStorageAccount).Key1
$blobStorageContext = New-AzStorageContext -StorageAccountName $blobStorageAccount -StorageAccountKey $blobStorageAccountKey

New-AzStorageContainer -Name images -Context $blobStorageContext
New-AzStorageContainer -Name thumbnails -Permission Container -Context $blobStorageContext

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

创建应用服务计划

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

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

使用 New-AzAppServicePlan 命令创建应用服务计划。

New-AzAppServicePlan -ResourceGroupName myResourceGroup -Name myAppServicePlan -Tier "Free"

创建 Web 应用

Web 应用为从 GitHub 示例存储库部署的示例应用代码提供承载空间。

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

使用 New-AzWebApp 命令在 myAppServicePlan 应用服务计划中创建一个 Web 应用

$webapp="<web_app>"

New-AzWebApp -ResourceGroupName myResourceGroup -Name $webapp -AppServicePlan myAppServicePlan

从 GitHub 存储库部署示例应用

应用服务支持通过多种方式将内容部署到 Web 应用。 在本教程中,将从公共 GitHub 示例存储库部署 Web 应用。 使用 az webapp deployment source config 命令配置 Web 应用的 GitHub 部署。

示例项目包含一个 ASP.NET MVC 应用。 该应用接受一个图像,将其保存到存储帐户,然后从缩略图容器显示图像。 此 Web 应用使用 Azure.StorageAzure.Storage.BlobsAzure.Storage.Blobs.Models 命名空间与 Azure 存储服务交互。

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
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

配置 Web 应用设置

示例 Web 应用使用适用于 .NET 的 Azure 存储 API 上传图像。 存储帐户凭据在 Web 应用的应用设置中进行设置。 使用 az webapp config appsettings setNew-AzStaticWebAppSetting 命令将应用设置添加到已部署的应用。

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

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

上传图像

若要测试 Web 应用,请浏览到已发布应用的 URL。 Web 应用的默认 URL 为 https://<web_app>.chinacloudsites.cn

选择“上传照片”区域以指定并上传文件,或者将文件拖动到该区域上。 如果成功上传,图像会消失。 “生成的缩略图”部分将保持为空白,直到我们稍后在本教程中对它进行测试为止。

在 .NET 中上传照片

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

public static async Task<bool> UploadFileToStorage(Stream fileStream, string fileName,
                                                    AzureStorageConfig _storageConfig)
{
    // Create a URI to the blob
    Uri blobUri = new Uri("https://" +
                          _storageConfig.AccountName +
                          ".blob.core.chinacloudapi.cn/" +
                          _storageConfig.ImageContainer +
                          "/" + fileName);

    // Create StorageSharedKeyCredentials object by reading
    // the values from the configuration (appsettings.json)
    StorageSharedKeyCredential storageCredentials =
        new StorageSharedKeyCredential(_storageConfig.AccountName, _storageConfig.AccountKey);

    // Create the blob client.
    BlobClient blobClient = new BlobClient(blobUri, storageCredentials);

    // Upload the file
    await blobClient.UploadAsync(fileStream);

    return await Task.FromResult(true);
}

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

方法
Uri Uri 构造函数
StorageSharedKeyCredential StorageSharedKeyCredential(String, String) 构造函数
BlobClient UploadAsync

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

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

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

Azure 门户图像容器列表

测试缩略图查看

为了测试缩略图查看,你将把图像上传到 thumbnails 容器,以检查应用可以读取 thumbnails 容器。

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

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

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

在本系列的第二部分中,您将使缩略图创建自动化,以便不需要此图像。 在 thumbnails 容器中,选择上传的图像,然后选择“删除”以删除图像 。

后续步骤

在本系列的第一部分中,你已学习了如何配置 Web 应用来与存储进行交互。

请前进到本系列的第二部分,以了解如何使用事件网格触发 Azure 函数以调整图像大小。