Latihan - Mengunggah citra ke akun Azure Storage Anda

5 menit

Mari kita tambahkan kode untuk mengunggah citra ke akun Azure Storage Anda. Dalam contoh ini, kita akan mengunggah citra berikut ke kontainer Microsoft Azure Storage kita.

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

Jika Anda sedang mengerjakan komputer lokal, klik kanan gambar ini dan simpan ke folder yang sama dengan tempat Anda memiliki aplikasi.

Jika Anda bekerja di lingkungan Microsoft Learn Sandbox, jalankan perintah berikut di folder aplikasi untuk mengunduh gambar ke dalam kotak pasir Anda:
```
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
```
Dalam kedua kasus, citra harus bernama docs-and-friends-selfie-stick.png.

Mengunggah citra ke penyimpanan blob

Untuk bekerja dengan objek blob individual di akun Azure Storage Anda, Anda menggunakan objek BlobClient. Untuk mendapatkan BlobClient objek, panggil GetBlobClient metode pada BlobContainerClient objek kontainer tempat blob akan disimpan. Saat memanggil metode GetBlobClient ini, Anda juga menyediakan nama untuk blob dalam kontainer. Misalnya, nama blob akan sama dengan nama file kita.

Setelah memiliki objek BlobClient, Anda dapat memanggil metode Upload untuk mengunggah file ke Azure Blob Storage. Tambahkan kode berikut ke file Program.cs Anda:
```
string blobName = "docs-and-friends-selfie-stick";
string fileName = "docs-and-friends-selfie-stick.png";
BlobClient blobClient = container.GetBlobClient(blobName);
blobClient.Upload(fileName, true);
```
Argumen kedua dalam metode Upload menentukan apakah objek blob yang ada dengan nama yang sama dapat ditimpa. Secara default, nilai ini adalah false. Dalam hal ini, kami menetapkan true untuk mengizinkan program dijalankan beberapa kali.

Mencantumkan objek dalam kontainer Azure Blob Storage

Untuk memvalidasi apakah program berhasil, kita akan menjalankan kapabilitas lain Azure Storage Blobs SDK untuk mencantumkan objek yang disimpan dalam kontainer di penyimpanan blob. Ini dapat dilakukan dengan memanggil GetBlobsmetode pada objek BlobContainerClient. Metode GetBlobs ini mengembalikan daftar halaman objek BlobItem yang berisi data tentang setiap blob dalam kontainer.

Tambahkan kode berikut ke program Anda setelah kode yang sebelumnya Anda tambahkan, lalu simpan file:
```
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}");
}
```
Kode ini memanggil GetBlobs pada objek BlobContainerClient untuk kontainer foto. Kemudian mengiterasi melalui setiap blob, mencetak nama blob, tanggal dan waktu blob dibuat, dan ukuran blob. Saat Anda menjalankan program, kode ini akan muncul sebagai baris tunggal untuk satu citra yang telah diunggah.

File Program.cs akan terlihat seperti ini jika Anda ingin memeriksa pekerjaan Anda.

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

Menjalankan aplikasi

Membuat dan menjalankan aplikasi untuk memverifikasi apakah semuanya berfungsi, dan mengunggah citra Anda ke Azure Blob Storage.

Catatan

Pastikan Anda berada di direktori PhotoSharingApp.
```
dotnet run
```

Selamat

Anda telah mempelajari dasar-dasar bekerja dengan paket SDK Azure Storage Blobs dan Azure Blob Storage. Jika Anda ingin, jelajahi lebih lanjut dengan membuat kontainer lain, unggah citra lainnya ke akun penyimpanan Anda atau menghapus citra. Anda dapat mempelajari lebih lanjut di halaman pustaka klien Azure Storage Blobs untuk GitHub .NET.

Mengunggah citra ke penyimpanan blob

Untuk bekerja dengan objek blob di kontainer Azure Storage, Anda menggunakan objek BlockBlobClient. Objek BlockBlobClient ini memiliki metode untuk mengunggah, mengunduh, mencantumkan, dan menghapus objek blob dalam kontainer. Untuk mendapatkan BlockBlobObject, panggil metode getBlockBlobClient pada objek ContainerClient. Anda kemudian dapat menggunakan metode uploadFile ini untuk mengunggah citra Anda ke Azure Storage.

Tambahkan kode ini ke file program index.js Anda segera setelah kode yang membuat kontainer:

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

Mencantumkan objek dalam kontainer Azure Blob Storage

Untuk memverifikasi bahwa kode kita berfungsi, kita dapat memanggil metode listBlobsFlat pada objek ContainerClient di program kita. Tambahkan kode ini ke file index.js , lalu simpan file:
```
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();
}
```
Kode ini akan mencetak semua blob di kontainer Azure Blob Storage kita dengan tanggal pembuatan blob beserta ukurannya. Untuk program kami, kode ini harus mencetak satu baris yang mewakili satu gambar yang telah kami unggah.

File akhir tersebut akan terlihat seperti ini.

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

Menjalankan aplikasi

Membuat dan menjalankan aplikasi.

Catatan

Pastikan Anda berada di direktori PhotoSharingApp.
```
node index.js
```
Tip

Jika mendapatkan kesalahan tentang penggunaan kata kunci await, pastikan Anda telah menambahkan kata kunci async ke definisi fungsi main per langkah terakhir dalam petunjuk sebelumnya.

Selamat

Anda telah mempelajari dasar-dasar bekerja dengan Pustaka Klien Azure Storage Blob untuk JavaScript dan Azure Blob Storage. Jika Anda ingin, jelajahi lebih lanjut dengan membuat kontainer lain, unggah citra lainnya ke akun penyimpanan Anda atau menghapus citra. Halaman Pustaka Klien Azure Storage Blob untuk JavaScript npm.js memiliki banyak contoh cara menggunakan pustaka.

Lanjutkan

Latihan - Mengunggah citra ke akun Azure Storage Anda

Mengunggah citra ke penyimpanan blob

Mencantumkan objek dalam kontainer Azure Blob Storage

Menjalankan aplikasi

Selamat

Mengunggah citra ke penyimpanan blob

Mencantumkan objek dalam kontainer Azure Blob Storage

Menjalankan aplikasi

Selamat

Saran dan Komentar