你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。
步骤 1：使用 Azure 存储将图像数据上传到云中
本教程是一个系列中的第一部分。 本教程将介绍如何部署 Web 应用。 该 Web 应用使用 Azure Blob 存储客户端库将图像上传到存储帐户。
在本系列的第一部分中，你将执行以下任务：
- 创建存储帐户
- 创建容器并设置权限
- 检索访问密钥
- 将 Web 应用部署到 Azure
- 配置应用设置
- 与 Web 应用进行交互
先决条件
需要一个 Azure 订阅才能完成此教程。 在开始之前，创建一个免费帐户。
Azure Cloud Shell
Azure 托管 Azure Cloud Shell（一个可通过浏览器使用的交互式 shell 环境）。 可以将 Bash 或 PowerShell 与 Cloud Shell 配合使用来使用 Azure 服务。 可以使用 Cloud Shell 预安装的命令来运行本文中的代码，而不必在本地环境中安装任何内容。
若要启动 Azure Cloud Shell，请执行以下操作：
| 选项 | 示例/链接 |
|---|---|
| 选择代码或命令块右上角的“试用”。 选择“试用”不会自动将代码或命令复制到 Cloud Shell。 |  |
| 转到 https://shell.azure.com 或选择启动 Cloud Shell 按钮可在浏览器中打开 Cloud Shell。 |  |
| 选择 Azure 门户右上角菜单栏上的 Cloud Shell 按钮。 |  |
若要使用 Azure Cloud Shell，请执行以下操作：
启动 Cloud Shell。
选择代码块（或命令块）上的“复制”按钮以复制代码或命令。
在 Windows 和 Linux 上选择 Ctrl+Shift+V，或在 macOS 上选择 Cmd+Shift+V 将代码或命令粘贴到 Cloud Shell 会话中。
选择“Enter”运行代码或命令。
创建资源组
重要
在本教程的第 2 步中，你将使用 Azure 事件网格和此步骤中创建的 blob 存储。 在支持事件网格的 Azure 区域中创建你的存储帐户。 有关受支持区域的列表，请参阅 Azure 产品（按区域）。
在 Azure Cloud Shell 中，如果尚未选择左上角的 Bash，请选中。
使用“az group create”命令创建资源组。 Azure 资源组是在其中部署和管理 Azure 资源的逻辑容器。
注意
为
region和rgName（资源组名称）设置适当的值。region="eastus" rgName="egridtutorialrg" az group create --name $rgName --location $region
创建存储帐户
此示例将图像上传到 Azure 存储帐户中的 blob 容器。
使用 az storage account create 命令在创建的资源组中创建存储帐户。
blobStorageAccount="myblobstorage$RANDOM"
az storage account create --name $blobStorageAccount --location $region \
--resource-group $rgName --sku Standard_LRS --kind StorageV2 --access-tier hot --allow-blob-public-access true
创建 Blob 存储容器
应用使用 Blob 存储帐户中的两个容器。 images 容器是应用在其中上传完整分辨率图像的位置。 在本系列的第 2 步中，一个 Azure 函数应用将调整大小后的图像缩略图上传到 thumbnails 容器。
images 容器的公共访问权限设置为 off。 thumbnails 容器的公共访问权限设置为 container。 container 公共访问权限设置允许访问网页的用户查看缩略图。
使用 az storage account keys list 命令获取存储帐户密钥。 然后，使用此密钥通过 az storage container create 命令创建两个容器。
blobStorageAccountKey=$(az storage account keys list -g $rgName \
-n $blobStorageAccount --query "[0].value" --output tsv)
az storage container create --name images \
--account-name $blobStorageAccount \
--account-key $blobStorageAccountKey
az storage container create --name thumbnails \
--account-name $blobStorageAccount \
--account-key $blobStorageAccountKey --public-access container
示例应用使用其名称和访问密钥连接到存储帐户。
创建应用服务计划
应用服务计划指定托管应用的 Web 服务器场的位置、大小和功能。 以下示例在免费定价层中创建名为 myAppServicePlan 的应用服务计划：
使用 az appservice plan create 命令创建应用服务计划。
planName="MyAppServicePlan"
az appservice plan create --name $planName --resource-group $rgName --sku Free
创建 Web 应用
Web 应用为从 GitHub 示例存储库部署的示例应用代码提供承载空间。
使用 az webapp create 命令在 myAppServicePlan 应用服务计划中创建 Web 应用。
webapp="mywebapp$RANDOM"
az webapp create --name $webapp --resource-group $rgName --plan $planName
从 GitHub 存储库部署示例应用
应用服务支持通过多种方式将内容部署到 Web 应用。 在本教程中，将从公共 GitHub 示例存储库部署 Web 应用。 使用 az webapp deployment source config 命令配置 Web 应用的 GitHub 部署。
示例项目包含一个 ASP.NET MVC 应用。 该应用接受一个图像，将其保存到存储帐户，然后从缩略图容器显示图像。 此 Web 应用使用 Azure.Storage、Azure.Storage.Blobs 和 Azure.Storage.Blobs.Models 命名空间与 Azure 存储服务交互。
az webapp deployment source config --name $webapp --resource-group $rgName \
--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 set 或 New-AzStaticWebAppSetting 命令将应用设置添加到已部署的应用。
az webapp config appsettings set --name $webapp --resource-group $rgName \
--settings AzureStorageConfig__AccountName=$blobStorageAccount \
AzureStorageConfig__ImageContainer=images \
AzureStorageConfig__ThumbnailContainer=thumbnails \
AzureStorageConfig__AccountKey=$blobStorageAccountKey
在部署并配置 Web 应用后，你可以在应用中测试图像上传功能。
上传图像
若要测试 Web 应用，请浏览到已发布应用的 URL。 Web 应用的默认 URL 为 https://<web_app>.azurewebsites.net。 然后，选择“上传照片”区域以指定并上传文件，或者将文件拖动到该区域上。 如果成功上传，图像会消失。 “生成的缩略图”部分将保持为空白，直到我们稍后在本教程中对它进行测试为止。
注意
运行以下命令以获取 Web 应用的名称：echo $webapp
在示例代码中，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.windows.net/" +
_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 门户。 从左侧菜单中，选择“存储帐户”，然后选择你的存储帐户的名称。
注意
运行以下命令以获取存储帐户的名称：
echo $blobStorageAccount。在左侧菜单中的“数据存储”部分，选择“容器”。
选择“图像”blob 容器。
验证图像是否显示在该容器中。
测试缩略图查看
为了测试缩略图查看，你将把图像上传到 thumbnails 容器，以检查应用是否可以读取 thumbnails 容器。
登录到 Azure 门户。 从左侧菜单中，选择“存储帐户”，然后选择你的存储帐户的名称。 选择“容器”，然后选择“缩略图”容器 。 选择“上传”以打开“上传 blob”窗格。
使用文件选取器选择文件，然后选择“上传”。
导航回到应用，以验证上传到 thumbnails 容器的图像是否可见。
在本系列的第二部分中，您将使缩略图创建自动化，以便不需要此图像。 在 thumbnails 容器中，选择上传的图像，然后选择“删除”以删除图像 。