Загрузка файлов в хранилище BLOB-объектов Azure в Blazor
Служба хранения BLOB-объектов Azure — одна из наиболее часто используемых служб в экосистеме Azure. Она позволяет загружать в облако большое количество файлов и при этом стоит очень дешево. Он также имеет интуитивно понятный веб-сайт, к которому вы можете получить доступ или загрузить его по прямой ссылке.
В целом довольно хороший сервис, я использую его как для работы, так и для личных проектов, и, честно говоря, самое лучшее — это простота того, как заставить его работать.
В большинстве случаев хранилище BLOB-объектов Azure используется на серверной стороне, напрямую загружая что-то, что является результатом операции или чего-то еще. Так что я на самом деле не загружал файлы с веб-сайта или что-то в этом роде. Не повезло!
Поскольку я фанат Blazor, я предлагаю вам способ загрузки файлов в хранилище BLOB-объектов Azure с использованием встроенного ввода файлов из HTML5.
Предварительные требования
- Учетная запись Azure (если у вас ее нет, перейдите здесь с кучей $$$).
- IDE (VS, Code, подойдет любая)
- .NET Core 3.0 или выше
Создание хранилища BLOB-объектов Azure
Перейдите на свой портал Azure и приступим к созданию учетной записи хранения.
Сначала найдите Storage accounts и нажмите на результат.
После загрузки нажмите Create.
Появится форма с множеством шагов, так что продолжайте и заполните их.
Заполнив все нужными настройками, пройдите проверку и создайте ресурс.
После того, как он будет создан, нажмите Go to resource. Мы собираемся получить строку подключения, которая позволит нам поиграть с API.
Получите ключи ресурсов
После того, как мы добрались до нашего вновь созданного ресурса, перейдите к Acccess keys под Security + networking. После загрузки вы увидите Connection string и Key, скопируйте их, потому что они нам понадобятся позже!
Создание крутого проекта Blazor Server
Для этого урока я буду использовать Visual Studio 2022, но, как я уже говорил ранее, вы можете использовать любую другую IDE и просто создать проект с помощью интерфейса командной строки dotnet .
Тогда давайте продолжим и очень быстро создадим проект Blazor с помощью Visual Studio всего за несколько шагов.
Если мы запустим то, что только что создали, оно будет выглядеть так: простое обычное приложение Blazor.
Теперь, когда у нас создан проект, давайте сделаем некоторые элементы пользовательского интерфейса, чтобы у нас была новая страница с набором входных данных, чтобы мы могли заполнить ключи из ресурса, 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
```csharp
namespace UploadingFilesAzBlobBlazor.Models
{
public class BlobFile
{
public string? Name { get; set; }
public byte[]? Data { get; set; }
}
}
Изменение пользовательского интерфейса
Теперь, когда наша модель создана, давайте продолжим и поколдуем с ее помощью над пользовательским интерфейсом!
Прежде всего создайте страницу в папке 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!");
}
}
Это небольшой код, но в основном он отображает форму и выполняет проверку.
Если вы нажмете кнопку загрузки и все в порядке, отобразится предупреждение.
Загрузка в хранилище BLOB-объектов Azure
Теперь, когда у нас готова большая часть пользовательского интерфейса, давайте установим пакет, который будет обрабатывать API хранилища BLOB-объектов Azure и позволит нам загружать файлы. Довольно просто.
Добавьте пакет NuGet
Давайте управлять пакетами NuGet из проекта и добавим Azure.Storage.Blob.
Отправка в хранилище BLOB-объектов Azure
Теперь давайте реализуем логику фактической загрузки файла. Обычно мы используем строку подключения и ключ из файла app.config, но в целях этого руководства мы используем входные данные и передаем туда данные.
Сначала добавим using для класса хранилища BLOB-объектов Azure.
@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!");
}
}
Тестирование кода
Теперь пришло время протестировать код. Для этого просто заполните форму и нажмите «Отправить».
Мы отобразим предупреждение, и файл должен быть загружен в хранилище BLOB-объектов Azure, перейдите на портал Azure и посмотрите.
Как видите, контейнер тоже был создан, теперь если мы попадем внутрь контейнера, то увидим загруженный нами файл.
Хорошая работа!
Рефакторинг
Теперь, когда все готово, давайте переместим код со страницы .razor в класс .razor.cs, чтобы он выглядел лучше.
Если вы используете Visual Studio 2022, при наведении курсора мыши прямо на @code загорится лампочка, она покажет вам опцию Extract block to code behind и сделает то, что сказано!
Теперь вы все разделите и сделаете!
Код
Весь этот проект находится на Github, и вы можете найти его здесь!
Если у вас есть какие-либо проблемы или вопросы, не стесняйтесь обращаться ко мне в любой социальной сети по адресу @emimontesdeoca (в Твиттере на самом деле это @emimontesdeocaa с двумя aa в конце). Большую часть моих соцсетей вы также можете найти в шапке блога.
Надеюсь, вам понравился пост! Сайя!
Ресурсы
- [[[[ТОК_51]]])
- [[[[ТОК_52]]])