Azure Blobストレージにファイルをアップロードする簡単な手順

Cloud storage ユーザーが任意のデジタルファイルをリモートサーバーに格納することができるサービスです.
Azure Blob Storage 大量のファイルをアップロードして保存するサービスです.それは簡単にコードや直接ストレージクライアントライブラリを使用して簡単にアクセスしながらデータを効率的に格納することができます.
核融合Blazor File Upload コンポーネントは、サーバーに1つまたは複数の画像、ドキュメント、オーディオ、ビデオ、およびその他のファイルをアップロードすることができます.HTML 5アップロードコンポーネント()の拡張バージョンです.その豊富な機能セットには、複数のファイルの選択、進行状況バー、自動アップロード、ドラッグアンドドロップ、フォルダー(ディレクトリ)のアップロード、ファイルの検証、および多くが含まれます.
この記事では、コード例を見ることによって、SyncFusion Blazorファイルアップロードコンポーネントを使用してAzure Blobストレージにファイルをアップロードする方法を学びます.
記事を以下のセクションに分けます.

Creating Azure storage .

Uploading files to Azure with ASP.NET Core-hosted Blazor WebAssembly (WASM) .

必要条件

Azure Storage .

Visual Studio 2019 and above.

.NET Core 3.0 and above.

Azureストレージの作成
最初に、ログインしてくださいAzure portal ストレージアカウントを作成するにはサブスクリプションがない場合はcreate a free subscription account 次の手順に従います.
ステップ1:上部のポータルメニューからのストレージアカウントのオプションを選択します.
ステップ2 :次に、ストレージアカウントページで、Createを選択します.
新しいストレージアカウントのオプションは、ストレージアカウントページを作成します.
ステップ3 :基本タブで、次の保管アカウントの基本的な詳細を示します.

既存のリソースグループ(または新しいものを作成する).

ストレージアカウントの名前.

領域,性能,冗長性

注:チェックボックスは、地域のアン可用性のイベントで利用可能なデータへの読み取りアクセスを既定でチェックします.
ステップ4:他のタブでは、何も変更しないでください.タブをクリックするまで、次をクリックします.次に、妥当性検査を行います.次のスクリーンショットを参照してください.

注意:他のタブのオプションの詳細についてはCreate a storage account documentation .
Step 5 : Createをクリックし、展開を完了します.展開後、次のスクリーンショットのように画面が表示されます.
ステップ6 :配置が成功したら、ストレージに表示するリソースをクリックします.
さて、ストレージは次のスクリーンショットのようになります.
ステップ7:左側のポータルメニューからアクセスキーを選択し、キーと接続文字列をコピーします.我々は、後で我々のアプリケーションでそれらを使用します.


ファイルをアップロードしてASAUでASP . NETファイルをアップロードします.( Net Core Hosted Blather )
Create an ASP.NET Core-hosted Blazor WebAssembly app and add the required model and controller classes . ソリューションの中に3つのプロジェクトファイルがあります.
クライアント:クライアント側のコードと、ブラウザでレンダリングされるページが含まれます.
Server : DB関連の操作やWeb APIなどのサーバー側のコードが含まれます.
共有:クライアントとサーバーでアクセスできる共有コードを含みます.

クライアントプロジェクトにブレーザーファイルアップロードコンポーネントを追加する
クライアントプロジェクトで、SyncFusion Blairファイルアップロードコンポーネントをインデックスに追加します.ページフォルダの下のかみそりページ.詳しくはGetting Started with Blazor File Upload Component ドキュメント.
次のコードは、Bladeorファイルアップロードコンポーネントをレンダリングします.

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

サーバープロジェクトにアップロードハンドラを追加する
Step 1 : AppSettingsの接続文字列の詳細を含めます.JSONファイル.次のスクリーンショットを参照してください.
ストレージアカウントのアクセスキーセクションで接続文字列を取得できます.次のスクリーンショットを参照してください.
Step 2 : Azureをインストールします.ストレージ.BLOBライブラリAzureストレージBLOBサービスで動作するようにします.
ステップ3 :コントローラフォルダの下のUploadAzureControllerファイルに保存アクションコントローラを追加します.
ステップ4 : UploadazureControllerで、AppSettingsからAzure接続文字列を展開します.JSONファイルとプライベート変数に格納されます.
次のコードを参照してください.

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

ステップ5:今、アップロードアクションを追加し、ファイルをAzure Blobストレージにアップロードします.

[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 Blairファイルアップロードコンポーネントに追加します.

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

手順7 :最終的にプロジェクトを実行し、ファイルを選択してアップロードします.
このように、我々はAzure Blobストレージにファイルをアップロードしました.次のスクリーンショットを参照してください.


Githubリファレンス
詳しくはUpload files to Azure Blob storage using the Blazor File Upload demo .

結論
読書ありがとう!このブログでは、syncfusionを使用してAzure Blobストレージ内のBlazorファイルをアップロードする簡単な手順を見ましたBlazor File Upload コンポーネント.これで、簡単に雲のファイルの膨大な量を格納することができますし、いつでもどこでもアクセスできます.ここで手順を試してみてくださいコメント欄にあなたのフィードバックを残す!
Syncfusion Essential Studio for Blazor 単一のパッケージでは、ファイル形式ライブラリを含むWeb用の70高性能、軽量、応答性UIコンポーネントを提供しています.それらを使用して見事なWebアプリケーションを構築する!
また、我々を介してお問い合わせすることができますsupport forum , Direct-Trac , or feedback portal . 我々は常にあなたを支援して満足している!

関連ブログ