練習 - 將影像上傳至 Azure 儲存體帳戶
讓我們新增程式碼,以將影像上傳至 Azure 儲存體帳戶。 在此範例中,我們會將下列映像上傳至 Azure 儲存體容器。
若您在本機電腦上工作,請以滑鼠右鍵按一下此影像,並將其儲存至與您應用程式所在的相同資料夾中。
若您在 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 頁面 具有許多使用程式庫方法的範例。