将文件上传到 Blazor 中的 Azure Blob 存储

March 23, 2022 · 3 分钟阅读

Available in: 中文 · English · Español · Français · Deutsch · Português · 한국어 · 日本語 · Русский · العربية · हिन्दी · Polski · Türkçe · Bahasa Indonesia · Nederlands

Azure Blob 存储服务是 Azure 生态系统上最常用的服务之一，它允许您将大量文件上传到云，同时价格超级便宜。它还具有直观的网络，您可以通过直接链接访问或下载它们。

总的来说，这是一项相当不错的服务，我一直在工作和个人项目中使用它，老实说，最好的事情是如何让它工作的简单性。

我使用 Azure Blob 存储的大多数情况都是在后端，直接上传操作结果或其他内容。所以我实际上没有从网站等上传任何类型的文件。不幸！

由于我是 Blazor 粉丝，因此我为您带来了一种使用 HTML5 的本机文件输入将文件上传到 Azure Blob 存储的方法。

先决条件

Azure 帐户（如果您没有，请使用一堆 $$$ 前往[此处]（又名.ms/免费））。
一个 IDE（VS、代码，任何都可以）
.NET Core 3.0或更高版本

创建 Azure Blob 存储

转到 Azure 门户，让我们继续创建存储帐户。

首先搜索 Storage accounts 并单击结果。

加载后，单击 Create。

将出现一个包含一系列步骤的表格，因此请继续填写它们。

使用所需的设置填充所有内容后，通过验证并创建资源。

创建后，单击 Go to resource。我们将获得一个连接字符串，让我们可以使用 API。

获取资源键

到达新创建的资源后，转到 Security + networking 下的 Acccess keys。加载后你会看到Connection string和Key，复制它们，因为我们稍后会需要它们！

创建一个很酷的 Blazor Server 项目

我将在本教程中使用 Visual Studio 2022，但正如我之前所说，您可以使用任何其他 IDE，只需使用 dotnet CLI 创建项目。

然后，让我们继续使用 Visual Studio 只需几个步骤即可快速创建 Blazor 项目。

如果我们运行刚刚创建的内容，它将如下所示，只是一个普通的 Blazor 应用程序。

现在我们已经创建了项目，让我们做一些 UI 操作，这样我们就有了一个带有一堆输入的新页面，这样我们就可以填写资源中的键、文件的 InputFile、一个用于执行某些操作的按钮以及一条操作将产生的消息。

创建模型

我们需要一些模型来正确地做到这一点。首先，我们将拥有 BlobRequest 类来处理连接字符串、容器名称和文件。

另外，为了保持一切整洁，我们将创建一个名为 BlobFile 的类，在其中存储 Name 和 Data。

我创建了一个名为 Models 的文件夹，因此我们将所有内容分开。

课程非常简单。```csharp using System.ComponentModel.DataAnnotations;

namespace UploadingFilesAzBlobBlazor.Models { public class BlobRequest { [Required(ErrorMessage = “Connection string is required”)] public string? ConnectionString { get; set; } [Required(ErrorMessage = “Container name is required”)] public string? Container { get; set; } public List? Files { get; set; } } }


```csharp
namespace UploadingFilesAzBlobBlazor.Models
{
    public class BlobFile
    {
        public string? Name { get; set; }
        public byte[]? Data { get; set; }
    }
}

修改用户界面

现在我们已经创建了模型，让我们继续用它在 UI 上施展一些魔法！

首先，在 Pages 文件夹下创建一个名为 Upload.razor 的页面。

在此页面中，我们将添加一个小表单来填充我们的 BlobRequest 类，因此我们必须为 ConnectionString、Container 和 Files 添加输入。

@page "/upload"
@using UploadingFilesAzBlobBlazor.Models
@inject IJSRuntime JsRuntime
<PageTitle> Upload</PageTitle>

<h1> Azure blob storage uploader!</h1>

<EditForm Model="@modal" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />

<div class="mb-3">
<label for="connectionString" class="form-label"> Connection string</label>
<InputText class="form-control" id="connectionString" @bind-Value="modal.ConnectionString" />
</div>

<div class="mb-3">
<label for="container" class="form-label"> Container name</label>
<InputText class="form-control" id="container" @bind-Value="modal.Container" />
</div>

<div class="mb-3">
<label for="formFileMultiple" class="form-label"> Files</label>
<InputFile OnChange="OnInputFileChange" class="form-control" id="formFileMultiple" multiple />
</div>

<div class="mb-3">
<button type="submit" class="btn btn-primary"> Submit</button>
</div>
</EditForm>

@code {
    private BlobRequest modal = new();
    private EditContext editContext;
    IReadOnlyList <IBrowserFile> selectedFiles;
    private void OnInputFileChange(InputFileChangeEventArgs e)
    {
        selectedFiles = e.GetMultipleFiles();
        this .StateHasChanged();
    }

    private async Task HandleValidSubmit() {
        // This is where we are going to upload stuff ! 
        await JsRuntime.InvokeVoidAsync("alert", "Files uploaded!");
    }
}

这是一些代码，但基本上会呈现表单并处理验证。

如果您按下上传按钮并且一切正常，它将显示一条警报。

上传到 Azure Blob 存储

现在我们已经完成了大部分 UI，现在让我们安装将处理 Azure Blob 存储 API 并允许我们上传文件的包。很简单。

添加 NuGet 包

让我们管理项目中的 NuGet 包并添加 Azure.Storage.Blob。

上传到 Azure Blob Stoare

现在让我们执行实际上传文件的逻辑，通常我们会使用连接字符串和 app.config 中的密钥，但为了本教程，我们使用输入并在那里提供数据。

首先，我们为 Azure Blob 存储类添加 using

@using Azure.Storage.Blobs
@using Azure.Storage.Blobs.Models

然后我们将使用 HandleValidSubmit 方法，该方法将连接到 blob 存储，如果容器不存在则创建容器，然后上传文件。

private async Task HandleValidSubmit()
{
    try
    {
        // Instantiate container
        var container = new BlobContainerClient(modal.ConnectionString, modal.Container);
        // Create container if not exists
        var createResponse = await container.CreateIfNotExistsAsync();
        // Set access policy
        if (createResponse != null && createResponse.GetRawResponse().Status == 201)
        {
            await container.SetAccessPolicyAsync(Azure.Storage.Blobs.Models.PublicAccessType.Blob);
        }

        // For each file that we have uploaded
        foreach (var file in selectedFiles)
        {
            // New blob
            var blob = container.GetBlobClient(file.Name);
            // Delete any blob with the same name
            await blob.DeleteIfExistsAsync(Azure.Storage.Blobs.Models.DeleteSnapshotsOption.IncludeSnapshots);
            // Create a file stream and use the UploadSync method to upload the Blob.
            using (var fileStream = file.OpenReadStream())
            {
                await blob.UploadAsync(fileStream, new BlobHttpHeaders { ContentType = file.ContentType });
            }
        }

        // Display success message
        await JsRuntime.InvokeVoidAsync("alert", "Files uploaded!");
    }
    catch (Exception e)
    {
        // Display error message
        await JsRuntime.InvokeVoidAsync("alert", "An error ocurred!");
    }
}