Ćwiczenie — przekazywanie obrazu na konto usługi Azure Storage

  • 5 min

Dodajmy kod w celu przekazania obrazu na konto usługi Azure Storage. Na potrzeby tego przykładu przekażemy następujący obraz do naszego kontenera usługi Azure Storage.

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

Jeśli pracujesz na komputerze lokalnym, kliknij prawym przyciskiem myszy ten obraz i zapisz go w tym samym folderze, w którym znajduje się aplikacja.

  1. Jeśli pracujesz w środowisku piaskownicy usługi Microsoft Learn, uruchom następujące polecenie w folderze aplikacji, aby pobrać obraz do piaskownicy:

    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

    W obu przypadkach nazwa obrazu powinna być docs-and-friends-selfie-stick.png.

Przekazywanie obrazu do magazynu obiektów blob

Aby pracować z poszczególnymi obiektami blob na koncie usługi Azure Storage, należy użyć obiektu BlobClient. Aby uzyskać obiekt, wywołaj GetBlobClient metodę BlobClient w BlobContainerClient obiekcie kontenera, w którym będzie przechowywany obiekt blob. Podczas wywoływania metody GetBlobClient należy również podać nazwę obiektu blob w kontenerze. W naszym przykładzie nazwa obiektu blob będzie taka sama jak nazwa pliku.

  1. Po utworzeniu obiektu BlobClient można wywołać metodę Upload, aby przekazać plik do usługi Azure Blob Storage. Dodaj następujący kod do pliku 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);

    Drugi argument w metodzie Upload określa, czy istniejący obiekt blob o tej samej nazwie może zostać zastąpiony. Domyślnie ta wartość to false. W tym przypadku określamy true , że program będzie uruchamiany wiele razy.

Wyświetlanie listy obiektów w kontenerze usługi Azure Blob Storage

Aby sprawdzić, czy nasz program działa, przećwiczymy inną możliwość zestawu SDK obiektów blob usługi Azure Storage, aby wyświetlić listę obiektów przechowywanych w kontenerze w magazynie obiektów blob. Można to zrobić, wywołując metodę GetBlobs w obiekcie BlobContainerClient. Metoda GetBlobs zwraca listę obiektów BlobItem, które zawierają dane dotyczące każdego obiektu blob w kontenerze.

  1. Dodaj następujący kod do programu po wcześniej dodanym kodzie, a następnie zapisz plik:

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

    Ten kod wywołuje element GetBlobs w obiekcie BlobContainerClient dla kontenera photos. Następnie wykonuje iterację przez każdy obiekt blob, wyświetlając nazwę obiektu blob, datę i godzinę utworzenia obiektu blob oraz rozmiar obiektu blob. Po uruchomieniu programu ten kod powinien pojawić się jako pojedynczy wiersz dla obrazu, który został przekazany.

  2. Końcowy plik Program.cs powinien wyglądać następująco, jeśli chcesz sprawdzić swoją pracę.

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

Uruchom aplikację

  1. Skompiluj i uruchom aplikację, aby upewnić się, że wszystko działa, i przekaż obraz do usługi Azure Blob Storage.

    Uwaga

    Upewnij się, że jesteś w katalogu PhotoSharingApp.

    dotnet run

Gratulacje

Znasz już podstawowe informacje dotyczące pracy z pakietem zestawu SDK obiektów blob usługi Azure Storage i usługą Azure Blob Storage. Jeśli chcesz, dowiedz się więcej, tworząc kolejny kontener, przesyłając więcej obrazów na konto magazynu lub usuwając obraz. Aby dowiedzieć się więcej, zobacz bibliotekę klienta obiektów blob usługi Azure Storage dla platformy .NET w serwisie GitHub.

Przekazywanie obrazu do magazynu obiektów blob

Aby pracować z obiektami blob w kontenerze usługi Azure Storage, należy użyć obiektu BlockBlobClient. Obiekt BlockBlobClient ma metody przekazywania, pobierania, wyświetlania i usuwania obiektów blob w kontenerze. Aby uzyskać element BlockBlobObject, wywołaj metodę getBlockBlobClient w obiekcie ContainerClient. Następnie możesz użyć metody uploadFile, aby przekazać obraz do usługi Azure Storage.

  1. Dodaj ten kod do pliku programu index.js bezpośrednio po kodzie, który tworzy kontener:

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

Wyświetlanie listy obiektów w kontenerze usługi Azure Blob Storage

  1. Aby sprawdzić, czy nasz kod działa, możemy wywołać metodę listBlobsFlat w obiekcie ContainerClient w naszym programie. Dodaj ten kod do pliku index.js , a następnie zapisz plik:

    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();
}

    Ten kod spowoduje wyświetlenie wszystkich obiektów blob w kontenerze usługi Azure Blob Storage z datą utworzenia obiektu blob i jego rozmiarem. W naszym programie ten kod powinien wyświetlić jeden wiersz reprezentujący przekazany pojedynczy obraz.

  2. Końcowy plik powinien wyglądać następująco.

    #!/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();

Uruchom aplikację

  1. Skompiluj i uruchom aplikację.

    Uwaga

    Upewnij się, że jesteś w katalogu PhotoSharingApp.

    node index.js

    Napiwek

    Jeśli wystąpi błąd dotyczący używania słowa kluczowego await , upewnij się, że słowo kluczowe zostało dodane async do main definicji funkcji zgodnie z ostatnim krokiem w poprzednich instrukcjach.

Gratulacje

Znasz już podstawowe informacje dotyczące pracy z biblioteką klienta obiektów blob usługi Azure Storage dla języków JavaScript i Azure Blob Storage. Jeśli chcesz, dowiedz się więcej, tworząc kolejny kontener, przesyłając więcej obrazów na konto magazynu lub usuwając obraz. Biblioteka klienta obiektów blob usługi Azure Storage dla języka JavaScript npm.js zawiera wiele przykładów używania biblioteki.