Blazor의 Azure Blob Storage에 파일 업로드

March 23, 2022 · 5분 읽기

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

Azure Blob 저장소 서비스는 Azure 생태계에서 가장 많이 사용되는 서비스 중 하나이며, 매우 저렴하면서 많은 파일을 클라우드에 업로드할 수 있습니다. 또한 직접 링크를 통해 액세스하거나 다운로드할 수 있는 직관적인 웹이 있습니다.

전반적으로 꽤 좋은 서비스입니다. 저는 이 서비스를 업무와 개인 프로젝트 모두에 사용해 왔으며 솔직히 가장 좋은 점은 작동 방법이 단순하다는 것입니다.

제가 Azure Blob Storage를 사용한 대부분의 경우는 백엔드에서 작업 등의 결과를 직접 업로드하는 것입니다. 그래서 저는 실제로 웹사이트 등에서 어떤 종류의 파일 업로드도 해본 적이 없습니다. 불길한!

저는 Blazor의 팬이기 때문에 HTML5의 기본 파일 입력을 사용하여 Azure Blob Storage에 파일을 업로드하는 방법을 소개하겠습니다.

전제 조건

Azure 계정(없으면 여기에서 $$$를 사용하여 계정을 만드세요.
IDE(VS, Code 등 모두 작동)
.NET Core 3.0 이상

Azure Blob 저장소 생성

Azure Portal로 이동하여 스토리지 계정을 만들어 보겠습니다.

먼저 Storage accounts를 검색하고 결과를 클릭하세요.

로드된 후 Create를 클릭합니다.

여러 단계가 포함된 양식이 표시되므로 계속해서 작성하세요.

원하는 설정으로 모든 항목을 채운 후 유효성 검사를 통과하고 리소스를 생성합니다.

생성된 후 Go to resource를 클릭합니다. 우리는 API를 가지고 놀 수 있는 연결 문자열을 얻을 것입니다.

리소스 키를 가져옵니다

새로 생성된 리소스에 도달한 후 Security + networking 아래의 Acccess keys로 이동합니다. 로드한 후에는 Connection string 및 Key가 표시됩니다. 나중에 필요하므로 복사하세요!

멋진 Blazor 서버 프로젝트 만들기

이 튜토리얼에서는 Visual Studio 2022를 사용할 예정이지만 앞서 말했듯이 다른 IDE를 사용하고 dotnet CLI를 사용하여 프로젝트를 생성하면 됩니다.

그런 다음 Visual Studio를 사용하여 여러 단계를 거쳐 Blazor 프로젝트를 매우 빠르게 만들어 보겠습니다.

방금 만든 것을 실행하면 다음과 같이 보일 것입니다. 평범한 일반 Blazor 애플리케이션입니다.

이제 프로젝트가 생성되었으므로 몇 가지 UI 작업을 수행하여 리소스의 키, 파일에 대한 InputFile, 작업을 수행하기 위한 버튼 및 작업으로 인해 발생하는 메시지를 채울 수 있는 여러 입력이 포함된 새 페이지를 만들어 보겠습니다.

모델 생성

이를 제대로 수행하려면 몇 가지 모델이 필요합니다. 먼저 연결 문자열, 컨테이너 이름 및 파일을 처리할 BlobRequest 클래스가 있습니다.

또한 모든 것을 깔끔하게 유지하기 위해 Name 및 Data를 저장할 BlobFile라는 클래스를 생성합니다.

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

이제 모델이 생성되었으므로 이를 사용하여 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 Storage에 업로드

이제 대부분의 UI가 완료되었으므로 Azure Blob Storage API를 처리하고 파일을 업로드할 수 있는 패키지를 설치해 보겠습니다. 꽤 간단합니다.

NuGet 패키지 추가

프로젝트에서 NuGet 패키지를 관리하고 Azure.Storage.Blob를 추가해 보겠습니다.

Azure Blob Storee에 업로드

이제 실제로 파일을 업로드하기 위한 논리를 수행해 보겠습니다. 일반적으로 연결 문자열과 app.config의 키를 사용하지만 이 자습서에서는 입력을 사용하고 거기에 데이터를 제공합니다.

먼저 Azure Blob Storage 클래스에 using를 추가해 보겠습니다.

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

그런 다음 Blob Storage에 연결하고 컨테이너가 없으면 컨테이너를 만든 다음 파일을 업로드하는 HandleValidSubmit 메서드에 대해 작업하겠습니다.

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!");
    }
}