練習 - 將影像上傳至 Azure 儲存體帳戶

5 分鐘

讓我們新增程式碼，以將影像上傳至 Azure 儲存體帳戶。在此範例中，我們會將下列映像上傳至 Azure 儲存體容器。

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

若您在本機電腦上工作，請以滑鼠右鍵按一下此影像，並將其儲存至與您應用程式所在的相同資料夾中。

若您在 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。

將影像上傳至 Blob 儲存體

若要處理 Azure 儲存體帳戶中的個別 Blob 物件，您可以使用 BlobClient 物件。若要取得 BlobClient 物件，請在 Blob 儲存位置所在之容器的 BlobContainerClient 物件上呼叫 GetBlobClient 方法。呼叫 GetBlobClient 方法時，您也可以提供容器中 Blob 的名稱。以我們的範例而言，Blob 的名稱將會與檔案名稱相同。

當您具備 BlobClient 物件之後，就可以呼叫 Upload 方法，以將檔案上傳至 Azure Blob 儲存體。新增以下程式碼至您的 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 方法中的第二個引數會指定是否可以覆寫具有相同名稱的現有 Blob 物件。根據預設，此值為 false。在此案例中，我們指定了 true 以允許程式多次執行。

列出 Azure Blob 儲存體容器中的物件

為了驗證程式可正常運作，我們將練習 Azure 儲存體 Blob SDK 的另一個功能，也就是列出儲存在 Blob 儲存體中容器內的物件。這可透過呼叫 BlobContainerClient 物件上的 GetBlobs 方法來完成。 GetBlobs 方法會傳回 BlobItem 物件的可分頁清單，其中包含容器內每個 Blob 的相關資料。

在您的程式中，將下列程式碼新增至您先前新增的程式碼之後，然後儲存檔案:
```
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}");
}
```
此程式碼會針對 photos 容器呼叫 BlobContainerClient 物件上的 GetBlobs。接著，該程式碼會逐一查看每個 Blob，並列印出 Blob 的名稱、建立日期和時間，以及大小。當您執行程式時，針對已上傳的那一個影像，此程式碼應會顯示為單行程式碼。

如果想要檢查您的工作，最終的 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}");
            }
        }
    }
}

執行應用程式

建置並執行應用程式，以確認一切均能正常運作，並將您的影像上傳至 Azure Blob 儲存體。

注意

確定您位於 PhotoSharingApp 目錄。
```
dotnet run
```

恭喜

您已了解使用 Azure 儲存體 Blob SDK 套件與 Azure Blob 儲存體的基本知識。如果您有興趣，可以建立另一個容器、將更多影像上傳至儲存體帳戶或刪除影像，藉此進行深入探索。您可以在適用於 .NET 的 Azure 儲存體 Blob 用戶端程式庫 GitHub 頁面 (英文) 進行深入了解。

將影像上傳至 Blob 儲存體

若要在 Azure 儲存體容器中使用 Blob 物件，您可以使用 BlockBlobClient 物件。 BlockBlobClient 物件具有上傳、下載、列出及刪除容器中 Blob 物件的方法。若要取得 BlockBlobObject，請呼叫 ContainerClient 物件上的 getBlockBlobClient 方法。接著，您可以使用 uploadFile 方法將影像上傳至 Azure 儲存體。

在您的 index.js 程式檔案中，將此程式碼新增至建立容器的程式碼正後方:

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

列出 Azure Blob 儲存體容器中的物件

為了確認程式碼能夠正常運作，我們可以在程式中呼叫 ContainerClient 物件上的 listBlobsFlat 方法。將此程式碼新增至 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 Blob 儲存體容器中的所有 Blob，以及 Blob 的建立日期和大小。以我們的程式而言，此程式碼應該會列印一行資料列，代表的是我們已上傳的單一影像。

最終檔案看起來應該像這樣。

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

執行應用程式

建置並執行應用程式。

注意

確定您位於 PhotoSharingApp 目錄。
```
node index.js
```
提示

如果您收到關於使用 await 關鍵字的錯誤，請確定您已經按照先前指示中的最終步驟，將 async 關鍵字新增至 main 函式定義。

恭喜

您已了解使用適用於 JavaScript 的 Azure 儲存體 Blob 用戶端程式庫與 Azure Blob 儲存體的基本知識。如果您有興趣，可以建立另一個容器、將更多影像上傳至儲存體帳戶或刪除影像，藉此進行深入探索。適用於 JavaScript 的 Azure 儲存體 Blob 用戶端程式庫 npm.js 頁面具有許多使用程式庫方法的範例。

繼續

練習 - 將影像上傳至 Azure 儲存體帳戶

將影像上傳至 Blob 儲存體

列出 Azure Blob 儲存體容器中的物件

執行應用程式

恭喜

將影像上傳至 Blob 儲存體

列出 Azure Blob 儲存體容器中的物件

執行應用程式

恭喜

意見反應