تعد خدمة تخزين Azure Blob واحدة من الخدمات الأكثر استخدامًا على نظام Azure البيئي، فهي تتيح لك تحميل الكثير من الملفات إلى السحابة بينما تكون رخيصة للغاية. كما أن لديها شبكة ويب بديهية يمكنك الوصول إليها أو تنزيلها عبر رابط مباشر.

بشكل عام، خدمة جيدة جدًا، لقد كنت أستخدمها في كل من مشاريع العمل والمشاريع الشخصية وبصراحة أفضل شيء هو بساطة كيفية إنجاحها.

معظم الحالات التي استخدمت فيها Azure Blob Storage تكون في الواجهة الخلفية، حيث يتم تحميل شيء ما مباشرة نتيجة لعملية أو شيء من هذا القبيل. لذلك لم أقم حقًا بأي نوع من تحميل ملف من موقع ويب أو نحو ذلك. سيئ الحظ!

نظرًا لأنني معجب بـ Blazor، فأنا أقدم لك طريقة لتحميل الملفات إلى Azure Blob Storage باستخدام إدخال الملف الأصلي من HTML5.

#المتطلبات

• حساب Azure (إذا لم يكن لديك، فانتقل هنا إلى مجموعة من $$$).
• IDE (VS، Code، أي شيء سيعمل)
• .NET Core 3.0 أو أعلى

إنشاء وحدة تخزين Azure Blob

انتقل إلى بوابة Azure الخاصة بك ودعنا نتابع إنشاء حساب تخزين.

ابحث أولاً عن Storage accounts وانقر على النتيجة.

بعد التحميل، انقر على Create.

سيظهر نموذج يحتوي على مجموعة من الخطوات، لذا قم بملئها.

بعد ملء كل شيء بالإعدادات التي تريدها، قم بتمرير التحقق من الصحة وإنشاء المورد.

بعد إنشائه، انقر على Go to resource. سنحصل على سلسلة اتصال تتيح لنا اللعب باستخدام واجهة برمجة التطبيقات (API).

احصل على مفاتيح الموارد

بعد أن وصلنا إلى المورد الذي تم إنشاؤه حديثًا، انتقل إلى Acccess keys ضمن Security + networking. بعد التحميل سترى Connection string و Key، انسخهما لأننا سنحتاج إليهما لاحقًا!

إنشاء مشروع رائع لخادم Blazor

سأستخدم Visual Studio 2022 لهذا البرنامج التعليمي، ولكن كما قلت من قبل، يمكنك استخدام أي بيئة تطوير متكاملة (IDE) أخرى وإنشاء المشروع باستخدام dotnet CLI.

ثم دعونا نمضي قدمًا وننشئ مشروع 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? Files { get; set; } } }

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

إنه جزء من التعليمات البرمجية ولكنه في الأساس سيعرض النموذج ويتعامل مع التحقق من الصحة.

إذا ضغطت على الزر للتحميل وكان كل شيء على ما يرام، فسيتم عرض تنبيه.

التحميل إلى مساحة تخزين Azure Blob

الآن بعد أن انتهينا من معظم واجهة المستخدم، فلنثبت الآن الحزمة التي ستتعامل مع واجهة برمجة تطبيقات Azure Blob Storage وستسمح لنا بتحميل الملفات. بسيطة جدا.

أضف حزمة NuGet

دعونا ندير حزم NuGet من المشروع ونضيف Azure.Storage.Blob.

التحميل إلى Azure Blob Stoare

الآن دعونا نقوم بالمنطق الخاص بتحميل الملف فعليًا، عادةً ما نستخدم سلسلة الاتصال والمفتاح من app.config ولكن من أجل هذا البرنامج التعليمي، نستخدم المدخلات ونوفر البيانات هناك.

أولاً، دعونا نضيف using لفئة تخزين Azure Blob

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

بعد ذلك، سنعمل على طريقة 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!");
    }
}

اختبار الكود

حان الوقت الآن لاختبار الكود، وللقيام بذلك، ما عليك سوى ملء النموذج والنقر على “إرسال”.

سنعرض تنبيهًا ويجب تحميل الملف إلى Azure Blob Storage، وانتقل إلى Azure Portal وألقِ نظرة.

كما ترون، تم إنشاء الحاوية أيضًا، والآن إذا دخلنا إلى الحاوية، نرى الملف الذي قمنا بتحميله.

عمل جيد!

إعادة البناء

الآن بعد أن تم كل شيء، دعنا ننقل الكود من صفحة .razor إلى فئة .razor.cs بحيث يبدو أفضل.

إذا كنت تستخدم Visual Studio 2022، فهناك مصباح كهربائي عند التمرير مباشرة في @code، وسيُظهر لك خيارًا لـ Extract block to code behind، وسيفعل كما هو مذكور!

الآن سوف يتم فصل كل شيء وإنجازه!

الكود

هذا المشروع بأكمله موجود على Github ويمكنك العثور عليه هنا!

إذا كانت لديك أي مشاكل أو أسئلة، فلا تتردد في الاتصال بي على أي وسيلة تواصل اجتماعية على @emimontesdeoca (في تويتر هو في الواقع @emimontesdeocaa مع اثنين من aa في النهاية). يمكنك أيضًا العثور على معظم وسائل التواصل الاجتماعي الخاصة بي على رأس المدونة.

آمل أن تكونوا قد أحببت هذا المنصب! سيا!

الموارد

• https://www.nuget.org/packages/Azure.Storage.Blobs
• https://docs.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-dotnet