Простые шаги для отправки файлов в хранилище BLOB-объектов Azure в приложении Blazor

Простые шаги для отправки файлов в хранилище BLOB-объектов Azure в приложении Blazor

Облачное хранилище — это услуга, позволяющая пользователям хранить любые цифровые файлы на удаленном сервере, откуда к ним можно легко получить доступ с любого устройства.

Azure Blob Storage — это служба, позволяющая загружать и хранить большие объемы файлов в облаке. Это позволяет вам экономично хранить данные, сохраняя при этом легкий доступ к ним с помощью кода или клиентской библиотеки прямого хранилища.

Наш компонент Syncfusion Blazor File Upload может помочь загрузить на сервер одно или несколько изображений, документов, аудио, видео и других файлов. Это расширенная версия компонента загрузки HTML 5 (‹input type="file"›). Его богатый набор функций включает выбор нескольких файлов, индикаторы выполнения, автоматическую загрузку, перетаскивание, загрузку папок (каталогов), проверку файлов и многое другое.

В этой статье мы узнаем, как отправлять файлы в хранилище BLOB-объектов Azure с помощью компонента Syncfusion Blazor File Upload, рассмотрев примеры кода.

Мы собираемся разделить статью на следующие разделы:

• Создание хранилища Azure.
• Загрузка файлов в Azure с помощью Blazor WebAssembly (WASM), размещенного на ASP.NET Core.

Предпосылки

• Лазурное хранилище.
• Visual Studio 2019 и выше.
• .NET Core 3.0 и выше.

Создание хранилища Azure

Сначала войдите на Портал Azure, чтобы создать учетную запись хранения. Если у вас нет подписки, создайте учетную запись бесплатной подписки и выполните следующие действия:

Шаг 1. Выберите параметр Учетные записи хранения в меню портала вверху.

Шаг 2. Затем на странице Учетные записи хранения выберите Создать.

Параметры новой учетной записи хранения будут перечислены на странице Создание учетной записи хранения.

Шаг 3. На вкладке "Основные" укажите следующие основные сведения о своей учетной записи хранения:

• Существующая группа ресурсов (или создайте новую).
• Имя вашей учетной записи хранения.
• Регион, производительность и избыточность.

Примечание. Флажок Предоставить доступ для чтения к данным в случае их недоступности по регионам будет установлен по умолчанию.

Шаг 4. Ничего не меняйте на других вкладках. Нажимайте Далее, пока не дойдете до вкладки Просмотр+Создать. Тогда ваша проверка пройдет. Обратитесь к следующему снимку экрана.

Примечание. Дополнительные сведения о параметрах на других вкладках см. в разделе Документация по созданию учетной записи хранения.

Шаг 5. Теперь нажмите Создать и дождитесь завершения развертывания. После развертывания вы увидите экран, как на следующем снимке экрана.

Шаг 6. После успешного развертывания нажмите Перейти к ресурсу, чтобы увидеть свое хранилище.

Теперь ваше хранилище будет выглядеть так, как показано на следующем снимке экрана.

Шаг 7. В левом меню портала выберите Ключи доступа и скопируйте свой Ключ и Строку подключения. Мы будем использовать их позже в нашем приложении.

Отправка файлов в Azure с помощью Blazor WebAssembly (WASM), размещенного на ASP.NET Core.

Создайте приложение Blazor WebAssembly, размещенное на ASP.NET Core, и добавьте необходимые классы модели и контроллера. Теперь у нас есть три файла проекта внутри решения:

Клиент. Содержит код на стороне клиента и страницы, которые будут отображаться в браузере.

Сервер. Содержит код на стороне сервера, например операции, связанные с базой данных, и веб-API.

Общий: содержит общий код, к которому можно получить доступ как на клиенте, так и на сервере.

Добавьте компонент Blazor File Upload в клиентский проект.

В клиентском проекте добавьте компонент Syncfusion Blazor File Upload на страницу Index.razor в папке Pages. Дополнительные сведения см. в документации Начало работы с компонентом загрузки файлов Blazor.

Следующий код отображает компонент Blazor File Upload.

<SfUploader AutoUpload="true" Multiple="false" ID="UploadFiles" MaxFileSize="5000000">
</SfUploader>

Добавить обработчик загрузки в серверный проект

Шаг 1. Теперь включите сведения о строке подключения в файл appsettings.json. Обратитесь к следующему снимку экрана.

Строку подключения можно получить в разделе Ключи доступа вашей учетной записи хранения. Обратитесь к следующему снимку экрана.

Шаг 2. Затем установите библиотеку Azure.Storage.Blob для работы с службой больших двоичных объектов Azure Storage.

Шаг 3. Добавьте контроллер действия Сохранить в файл UploadAzureController в папке Controllers.

Шаг 4. В UploadAzureController извлеките строку подключения Azure из файла appsettings.json и сохраните ее в закрытой переменной ( azureConnectionString).
См. следующий код.

[Route("api/[controller]")]
[ApiController]
public class UploadAzureController : ControllerBase
{
    private readonly string azureConnectionString;
    public UploadAzureController(IConfiguration configuration)
    {
        azureConnectionString = configuration.GetConnectionString("AzureConnectionString");
    }
}

Шаг 5. Теперь добавьте действие «Отправить», чтобы загрузить файлы в хранилище BLOB-объектов Azure.

[HttpPost("[action]")]
public async Task Upload(IList<IFormFile> UploadFiles)
{
    try
    {
        foreach (var files in UploadFiles)
        {
            // Azure connection string and container name passed as an argument to get the Blob reference of the container.
            var container = new BlobContainerClient(azureConnectionString, "upload-container");

            // Method to create our container if it doesn’t exist.
            var createResponse = await container.CreateIfNotExistsAsync();

            // If container successfully created, then set public access type to Blob.
            if (createResponse != null && createResponse.GetRawResponse().Status == 201)
                await container.SetAccessPolicyAsync(Azure.Storage.Blobs.Models.PublicAccessType.Blob);

            // Method to create a new Blob client.
            var blob = container.GetBlobClient(files.FileName);

            // If a blob with the same name exists, then we delete the Blob and its snapshots.
            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 = files.OpenReadStream())
            {
                await blob.UploadAsync(fileStream, new BlobHttpHeaders { ContentType = files.ContentType });
            }
        }
    }
    catch (Exception e)
    {
        Response.Clear();
        Response.StatusCode = 204;
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
    }
}

Шаг 6. Затем добавьте URL-адрес действия загрузки в компонент Syncfusion Blazor File Upload.

<SfUploader AutoUpload="true" Multiple="false" ID="UploadFiles" MaxFileSize="5000000">
    <UploaderAsyncSettings SaveUrl="api/UploadAzure/Upload"></UploaderAsyncSettings>
</SfUploader>

Шаг 7. Наконец, запустите проект, выберите файлы и загрузите их.

Таким образом, мы загрузили наши файлы в хранилище BLOB-объектов Azure в приложении Blazor WebAssembly. Обратитесь к следующему снимку экрана.

Ссылка на GitHub

Дополнительные сведения см. в разделе Отправка файлов в хранилище BLOB-объектов Azure с помощью демонстрации Blazor File Upload.

Заключение

Спасибо за прочтение! В этом блоге мы рассмотрели простые процедуры загрузки файлов Blazor в хранилище BLOB-объектов Azure с помощью компонента Syncfusion Загрузка файлов Blazor. Благодаря этому вы можете легко хранить огромное количество файлов в облаке и получать к ним доступ в любом месте и в любое время. Попробуйте шаги, описанные здесь, и оставьте свой отзыв в разделе комментариев ниже!

Syncfusion Essential Studio для Blazor предлагает более 70 высокопроизводительных, легких и отзывчивых компонентов пользовательского интерфейса для Интернета, включая библиотеки форматов файлов, в одном пакете. Используйте их для создания потрясающих веб-приложений!

Вы также можете связаться с нами через наш форум поддержки, Direct-Trac или портал обратной связи. Мы всегда рады Вам помочь!

Связанные блоги

• Синхронизация Blazor Resource Scheduler со службами RESTful
• Шаги по синхронизации задач календаря JIRA с планировщиком Blazor
• Точный импорт и экспорт файлов RTF в Blazor
• Элегантная визуализация данных с помощью самых быстрых в мире диаграмм Blazor

Первоначально опубликовано на https://www.syncfusion.com 24 ноября 2021 г.