تدريب - تحميل صورة إلى حساب تخزين Azure

مكتمل

هيّا نضيف تعليمة برمجية لتحميل صورة إلى حساب تخزين Azure. في هذا المثال، سنحمّل الصورة التالية إلى حاوية تخزين Azure.

An image of the Docs mascot and the Azure mascot taking a selfie.

إذا كنت تعمل على جهازك المحلي، فانقر بزر الماوس الأيمن فوق هذه الصورة واحفظها في المجلد نفسه حيث يوجد التطبيق الخاص بك.

  1. إذا كنت تعمل في بيئة الاختبار المعزولة ل Microsoft Learn، فقم بتشغيل الأمر التالي في مجلد التطبيق لتنزيل الصورة في بيئة الاختبار المعزولة:

    wget https://github.com/MicrosoftDocs/mslearn-connect-app-to-azure-storage/blob/main/images/docs-and-friends-selfie-stick.png?raw=true -O docs-and-friends-selfie-stick.png
    

    في كلتا الحالتين، يجب أن يكون اسم الصورة docs-and-friends-selfie-stick.png.

تحميل صورة إلى مخزن كائن ثنائي كبير الحجم

للعمل مع عناصر الكائنات الثنائية كبيرة الحجم في حساب تخزين Azure، يمكنك استخدام كائن BlobClient. للحصول على كائن BlobClient ، قم باستدعاء GetBlobClient الأسلوب على BlobContainerClient كائن الحاوية حيث سيتم تخزين الكائن الثنائي كبير الحجم. عند استدعاء أسلوب GetBlobClient، يمكنك أيضًا تسمية الكائن الثنائي كبير الحجم في الحاوية. على سبيل المثال، سيكون اسم الكائن الثنائي كبير الحجم هو اسم الملف الخاص بنا نفسه.

  1. بعد أن يكون لديك كائن BlobClient، يمكنك استدعاء أسلوب Upload لتحميل ملف إلى موقع تخزين البيانات الثنائية كبيرة الحجم لـ Azure. أضف التعليمات البرمجية التالية إلى ملف Program.cs الخاص بك:

    string blobName = "docs-and-friends-selfie-stick";
    string fileName = "docs-and-friends-selfie-stick.png";
    BlobClient blobClient = container.GetBlobClient(blobName);
    blobClient.Upload(fileName, true);
    

    الوسيطة الثانية في أسلوب Upload تحدد ما إذا كان يمكن الكتابة فوق عنصر الكائن الثنائي كبير الحجم بالاسم نفسه. بشكل افتراضي، هذه القيمة هي false. في هذه الحالة، نحدد true للسماح بتشغيل البرنامج عدة مرات.

سرد العناصر في حاوية موقع تخزين كائن ثنائي كبير الحجم لـ Azure

للتحقق من أن برنامجنا قد نجح، سنمارس إمكانية أخرى لـ SDK لكائن ثنائي كبير الحجم لتخزين Azure لسرد العناصر المخزنة في حاوية في مخزن البيانات الثنائية الكبيرة. يمكن القيام بذلك عن طريق استدعاء أسلوب GetBlobs في عنصر BlobContainerClient. يُرجع الأسلوب GetBlobsقائمة قابلة للتقسيم إلى صفحات من عناصر BlobItem التي تحتوي على بيانات حول كل كائن ثنائي كبير الحجم في الحاوية.

  1. أضف التعليمات البرمجية التالية إلى البرنامج بعد التعليمات البرمجية التي أضفتها مسبقا، ثم احفظ الملف:

    var blobs = container.GetBlobs();
    foreach (var blob in blobs)
    {
        Console.WriteLine($"{blob.Name} --> Created On: {blob.Properties.CreatedOn:yyyy-MM-dd HH:mm:ss}  Size: {blob.Properties.ContentLength}");
    }
    

    تستدعي هذه التعليمة البرمجية GetBlobs في العنصر BlobContainerClient لحاوية للصور. ثم يُعاد التكرار من خلال كل كائن ثنائي كبير الحجم، وطباعة اسمه، وتاريخ ووقت إنشائه، وحجمه. عند تشغيل البرنامج الخاص بك، يجب أن تظهر هذه التعليمة البرمجية كخط واحد للصورة التي تم تحميلها.

  2. يجب أن يبدو الملف Program.cs النهائي هكذا إذا كنت تريد التحقق من عملك.

    using System;
    using Microsoft.Extensions.Configuration;
    using System.IO;
    using Azure.Storage.Blobs;
    
    namespace PhotoSharingApp
    {
        class Program
        {
            static void Main(string[] args)
            {
                var builder = new ConfigurationBuilder()
                    .SetBasePath(Directory.GetCurrentDirectory())
                    .AddJsonFile("appsettings.json");
    
                var configuration = builder.Build();
    
                // Get a connection string to our Azure Storage account.
                var connectionString = configuration.GetConnectionString("StorageAccount");
    
                // Get a reference to the container client object so you can create the "photos" container
                string containerName = "photos";
                BlobContainerClient container = new BlobContainerClient(connectionString, containerName);
                container.CreateIfNotExists();
    
                // Uploads the image to Blob storage.  If a blb already exists with this name it will be overwritten
                string blobName = "docs-and-friends-selfie-stick";
                string fileName = "docs-and-friends-selfie-stick.png";
                BlobClient blobClient = container.GetBlobClient(blobName);
                blobClient.Upload(fileName, true);
    
                // List out all the blobs in the container
                var blobs = container.GetBlobs();
                foreach (var blob in blobs)
                {
                    Console.WriteLine($"{blob.Name} --> Created On: {blob.Properties.CreatedOn:yyyy-MM-dd HH:mm:ss}  Size: {blob.Properties.ContentLength}");
                }
            }
        }
    }
    

تشغيل التطبيق

  1. يمكنك بناء وتشغيل التطبيق للتحقق من نجاح عمل كل شيء، وتحميل الصورة الخاصة بك إلى موقع تخزين البيانات الثنائية كبيرة الحجم لـ Azure.

    إشعار

    تأكد من أنك في دليل PhotoSharingApp.

    dotnet run
    

تهانينا

لقد تعلمت أساسيات العمل مع حزمة SDK Azure Storage Blobs، وAzure Blob Storage. في حالة رغبتك، يمكنك استكشاف المزيد من خلال إنشاء حاوية أخرى أو تحميل المزيد من الصور إلى حساب التخزين أو حذف صورة. يمكنك معرفة المزيد في مكتبة عملاء موقع تخزين البيانات الثنائية كبيرة الحجم لـ Azure لصفحة .NET GitHub.

تحميل صورة إلى مخزن كائن ثنائي كبير الحجم

للعمل مع عناصر الكائنات الثنائية كبيرة الحجم في حاوية تخزين Azure، يمكنك استخدام كائن BlockBlobClient. يحتوي العنصر BlockBlobClient على أساليب لتحميل الكائنات الثنائية كبيرة الحجم في حاوية، بالإضافة إلى تنزيلها، وسردها، وحذفها. للحصول على BlockBlobObject، يمكنك استدعاء الأسلوب getBlockBlobClient في العنصر ContainerClient. بعد ذلك، يمكنك استخدام الأسلوب uploadFile لتحميل صورتك إلى تخزين Azure.

  1. أضف هذه التعليمة البرمجية إلى ملف برنامج index.js مباشرة بعد التعليمات البرمجية التي تنشئ الحاوية:

    const filename = 'docs-and-friends-selfie-stick.png';
    const blockBlobClient = containerClient.getBlockBlobClient(filename);
    blockBlobClient.uploadFile(filename);
    

سرد العناصر في حاوية موقع تخزين كائن ثنائي كبير الحجم لـ Azure

  1. للتحقق من نجاح عمل التعليمة البرمجية الخاصة بنا، يمكننا استدعاء الأسلوب listBlobsFlat على العنصرContainerClient في برنامجنا. أضف هذه التعليمة البرمجية إلى ملف index.js ، ثم احفظ الملف:

    let blobs = containerClient.listBlobsFlat();
    let blob = await blobs.next();
    while (!blob.done) {
        console.log(`${blob.value.name} --> Created: ${blob.value.properties.createdOn}   Size: ${blob.value.properties.contentLength}`);
        blob = await blobs.next();
    }
    

    ستقوم هذه التعليمة البرمجية بطباعة جميع الكائنات الثنائية كبيرة الحجم في حاوية موقع تخزين البيانات الثنائية كبيرة الحجم لـ Azure الخاصة بنا مع تاريخ إنشاء الكائن الثنائي كبير الحجم وحجمه. بالنسبة إلى برنامجنا، يجب أن تطبع هذه التعليمة البرمجية صفًا واحدًا يمثل الصورة الوحيدة التي قمنا بتحميلها.

  2. الملف النهائي يجب أن يبدو هكذا.

    #!/usr/bin/env node
    require('dotenv').config();
    
    const { BlobServiceClient } = require("@azure/storage-blob");
    
    const storageAccountConnectionString = process.env.AZURE_STORAGE_CONNECTION_STRING;
    const blobServiceClient = BlobServiceClient.fromConnectionString(storageAccountConnectionString);
    
    async function main() {
    // Create a container (folder) if it does not exist
    const containerName = 'photos';
    const containerClient = blobServiceClient.getContainerClient(containerName);
    const containerExists = await containerClient.exists()
    if ( !containerExists) {
        const createContainerResponse = await containerClient.createIfNotExists();
        console.log(`Create container ${containerName} successfully`, createContainerResponse.succeeded);
    }
    else {
        console.log(`Container ${containerName} already exists`);
    }
    
    // Upload the file
    const filename = 'docs-and-friends-selfie-stick.png';
    const blockBlobClient = containerClient.getBlockBlobClient(filename);
    blockBlobClient.uploadFile(filename);
    
    // Get a list of all the blobs in the container
    let blobs = containerClient.listBlobsFlat();
    let blob = await blobs.next();
    while (!blob.done) {
        console.log(`${blob.value.name} --> Created: ${blob.value.properties.createdOn}   Size: ${blob.value.properties.contentLength}`);
        blob = await blobs.next();
    }
    }
    main();
    

تشغيل التطبيق

  1. إنشاء التطبيق وتشغيله.

    إشعار

    تأكد من أنك في دليل PhotoSharingApp.

    node index.js
    

    تلميح

    إذا حدث خطأ حيال استخدام الكلمة الأساسية awaitفتأكد من إضافة الكلمة الأساسية asyncإلى تعريف الوظيفة main حسب الخطوة النهائية في الإرشادات السابقة.

تهانينا

لقد تعلمت أساسيات العمل في مكتبة عميل Azure Storage Blob لـ JavaScript وAzure Blob Storage. في حالة رغبتك، يمكنك استكشاف المزيد من خلال إنشاء حاوية أخرى أو تحميل المزيد من الصور إلى حساب التخزين أو حذف صورة. تحتوي صفحة Azure Storage Blob Client Library ل JavaScript npm.js على العديد من الأمثلة حول كيفية استخدام المكتبة.