Snabbstart: Hantera blobar med JavaScript v12 SDK i en webbläsare

Azure Blob Storage är optimerat för att lagra stora mängder ostrukturerade data. Blobar är objekt som kan innehålla text eller binära data, inklusive bilder, dokument, strömmande media och arkivera data. I den här snabbstarten lär du dig att hantera blobar med hjälp av JavaScript i en webbläsare. Du laddar upp och listar blobar och skapar och tar bort containrar.

Ytterligare resurser:

• Referensdokumentation för API
• Bibliotekskällkod
• Paket (npm)
• Exempel

Förutsättningar

• Ett Azure-konto med en aktiv prenumeration
• Ett Azure Storage konto
• Node.js
• Microsoft Visual Studio Code
• Ett Visual Studio Code-tillägg för felsökning av webbläsare, till exempel:
  • Felsökare för Microsoft Edge
  • Felsökare för Chrome
  • Felsökare för Firefox

Objektmodell

I blobblagringen finns tre typer av resurser:

• Lagringskontot
• En container på lagringskontot
• En blob i containern

Följande diagram visar relationen mellan de här resurserna.

I den här snabbstarten använder du följande JavaScript-klasser för att interagera med dessa resurser:

• BlobServiceClient:Med BlobServiceClient klassen kan du ändra Azure Storage och blobcontainrar.
• ContainerClient:Med ContainerClient klassen kan du ändra Azure Storage och deras blobar.
• BlockBlobClient:Med BlockBlobClient klassen kan du ändra Azure Storage blobar.

Inrätta

Det här avsnittet går igenom hur du förbereder ett projekt för att arbeta med Azure Blob Storage-klientbiblioteket v12 för JavaScript.

Skapa en CORS-regel

Innan webbappen kan komma åt Blob Storage från klienten måste du konfigurera ditt konto för att aktivera resursdelning mellan ursprung, eller CORS.

I Azure Portal väljer du ditt lagringskonto. Om du vill definiera en ny CORS-regel går du Inställningar avsnittet och väljer CORS. För den här snabbstarten skapar du en öppen CORS-regel:

I följande tabell beskrivs varje CORS-inställning och de värden som används för att definiera regeln.

När du har fyllt i fälten med värdena från den här tabellen klickar du på knappen Spara.

Skapa en signatur för delad åtkomst

Signaturen för delad åtkomst (SAS) används av kod som körs i webbläsaren för att auktorisera Azure Blob Storage-begäranden. Med hjälp av SAS kan klienten auktorisera åtkomst till lagringsresurser utan att ha åtkomstnyckel eller anslutningssträng för kontot. Mer information om SAS finns i Använda signaturer för delad åtkomst (SAS).

Följ dessa steg för att hämta BLOB-tjänstens SAS-URL:

1. I Azure Portal väljer du ditt lagringskonto.
2. Gå till avsnittet Säkerhet + nätverk och välj Signatur för delad åtkomst.
3. Rulla nedåt och klicka på knappen Generera SAS och anslutningssträng.
4. Rulla ned ytterligare och leta upp fältet SAS-URL för Blob Service
5. Klicka på knappen Kopiera till Urklipp längst till höger i fältet SAS-URL för Blob Service.
6. Spara den kopierade URL:en någonstans för användning i ett kommande steg.

Lägga till Azure Blob Storage-klientbiblioteket

På den lokala datorn skapar du en ny mapp med namnet azure-blobs-js-browser och öppnar den i Visual Studio Code.

Välj Visa > Terminal för att öppna ett konsolfönster i Visual Studio Code. Kör följande kommando Node.js Package Manager (npm) i terminalfönstret för att skapa en package.json-fil.

npm init -y

Azure SDK består av många separata paket. Du kan välja vilka paket du behöver baserat på de tjänster som du tänker använda. Installera npm paketet genom att köra följande kommando i @azure/storage-blob terminalfönstret.

npm install --save @azure/storage-blob

Paketering av Azure Blob Storage-klientbiblioteket

Om du vill använda Azure SDK-bibliotek på en webbplats konverterar du koden så att den fungerar i webbläsaren. Du gör detta med hjälp av ett verktyg som kallas paketerare. Paketering använder JavaScript-kod som skrivitsNode.js konventioner och konverterar den till ett format som webbläsare förstår. I den här snabbstartsartikeln används Bundler(1000–100 000).

Installera Installer genom att köra npm följande kommando i terminalfönstret:

npm install -g parcel-bundler

I Visual Studio Code öppnar du filen package.json och lägger till browserlist en mellan license dependencies posterna och . Detta browserlist riktar sig till den senaste versionen av tre populära webbläsare. Den fullständiga package.json-filen bör nu se ut så här:

{
  "name": "azure-blobs-javascript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "browserslist": [
    "last 1 Edge version",
    "last 1 Chrome version",
    "last 1 Firefox version"
  ],
  "dependencies": {
    "@azure/storage-blob": "^12.1.1"
  }
}

Spara filen package.json.

Importera Azure Blob Storage-klientbiblioteket

Om du vill använda Azure SDK-bibliotek i JavaScript importerar du @azure/storage-blob paketet. Skapa en ny fil Visual Studio kod som innehåller följande JavaScript-kod.

// index.js
const { BlobServiceClient } = require("@azure/storage-blob");
// Now do something interesting with BlobServiceClient

Spara filen som index.js i katalogen azure-blobs-js-browser.

Implementera HTML-sidan

Skapa en ny fil i Visual Studio Code och lägg till följande HTML-kod.

<!-- index.html -->
<!DOCTYPE html>
<html>

<body>
    <button id="create-container-button">Create container</button>
    <button id="delete-container-button">Delete container</button>
    <button id="select-button">Select and upload files</button>
    <input type="file" id="file-input" multiple style="display: none;" />
    <button id="list-button">List files</button>
    <button id="delete-button">Delete selected files</button>
    <p><b>Status:</b></p>
    <p id="status" style="height:160px; width: 593px; overflow: scroll;" />
    <p><b>Files:</b></p>
    <select id="file-list" multiple style="height:222px; width: 593px; overflow: scroll;" />
</body>

<script src="./index.js"></script>

</html>

Spara filen som index.html i mappen azure-blobs-js-browser.

Kodexempel

Exempelkoden visar hur du utför följande uppgifter med Azure Blob Storage-klientbiblioteket för JavaScript:

• Deklarera fält för gränssnittselement
• Lägga till information om ditt lagringskonto
• Skapa klientobjekt
• Skapa och ta bort en lagringscontainer
• Lista blobar
• Upload blobar
• Ta bort blobar

Du kör koden när du har lagt till alla kodfragment i denindex.js filen.

Deklarera fält för gränssnittselement

Lägg till följande kod i slutet avindex.jsfilen.

const createContainerButton = document.getElementById("create-container-button");
const deleteContainerButton = document.getElementById("delete-container-button");
const selectButton = document.getElementById("select-button");
const fileInput = document.getElementById("file-input");
const listButton = document.getElementById("list-button");
const deleteButton = document.getElementById("delete-button");
const status = document.getElementById("status");
const fileList = document.getElementById("file-list");

const reportStatus = message => {
    status.innerHTML += `${message}<br/>`;
    status.scrollTop = status.scrollHeight;
}

Spara index.js fil.

Den här koden deklarerar fält för varje HTML-element och implementerar en reportStatus funktion för att visa utdata.

I följande avsnitt lägger du till varje nytt block med JavaScript-kod efter föregående block.

Lägga till information om ditt lagringskonto

Lägg till kod för att få åtkomst till ditt lagringskonto. Ersätt platshållaren med DIN SAS-URL för Blob Service som du genererade tidigare. Lägg till följande kod i slutet avindex.jsfilen.

// Update <placeholder> with your Blob service SAS URL string
const blobSasUrl = "<placeholder>";

Spara index.js fil.

Skapa klientobjekt

Skapa BlobServiceClient- och ContainerClient-objekt för att interagera med Azure Blob Storage-tjänsten. Lägg till följande kod i slutet avindex.jsfilen.

// Create a new BlobServiceClient
const blobServiceClient = new BlobServiceClient(blobSasUrl);

// Create a unique name for the container by 
// appending the current time to the file name
const containerName = "container" + new Date().getTime();

// Get a container client from the BlobServiceClient
const containerClient = blobServiceClient.getContainerClient(containerName);

Spara index.js fil.

Skapa och ta bort en lagringscontainer

Skapa och ta bort lagringscontainern när du klickar på motsvarande knapp på webbsidan. Lägg till följande kod i slutet avindex.jsfilen.

const createContainer = async () => {
    try {
        reportStatus(`Creating container "${containerName}"...`);
        await containerClient.create();
        reportStatus(`Done.`);
    } catch (error) {
        reportStatus(error.message);
    }
};

const deleteContainer = async () => {
    try {
        reportStatus(`Deleting container "${containerName}"...`);
        await containerClient.delete();
        reportStatus(`Done.`);
    } catch (error) {
        reportStatus(error.message);
    }
};

createContainerButton.addEventListener("click", createContainer);
deleteContainerButton.addEventListener("click", deleteContainer);

Spara index.js fil.

Lista blobar

Visa en lista med innehållet i lagringscontainern när du klickar på knappen Lista filer. Lägg till följande kod i slutet avindex.jsfilen.

const listFiles = async () => {
    fileList.size = 0;
    fileList.innerHTML = "";
    try {
        reportStatus("Retrieving file list...");
        let iter = containerClient.listBlobsFlat();
        let blobItem = await iter.next();
        while (!blobItem.done) {
            fileList.size += 1;
            fileList.innerHTML += `<option>${blobItem.value.name}</option>`;
            blobItem = await iter.next();
        }
        if (fileList.size > 0) {
            reportStatus("Done.");
        } else {
            reportStatus("The container does not contain any files.");
        }
    } catch (error) {
        reportStatus(error.message);
    }
};

listButton.addEventListener("click", listFiles);

Spara index.js fil.

Den här koden anropar funktionen ContainerClient.listBlobsFlat och använder sedan en iterator för att hämta namnet på varje BlobItem som returneras. För varje BlobItem uppdateras listan Filer med namnegenskapsvärdet.

Upload blobar

Upload filer till lagringscontainern när du klickar på knappen Välj och ladda upp filer. Lägg till följande kod i slutet avindex.jsfilen.

const uploadFiles = async () => {
    try {
        reportStatus("Uploading files...");
        const promises = [];
        for (const file of fileInput.files) {
            const blockBlobClient = containerClient.getBlockBlobClient(file.name);
            promises.push(blockBlobClient.uploadBrowserData(file));
        }
        await Promise.all(promises);
        reportStatus("Done.");
        listFiles();
    }
    catch (error) {
            reportStatus(error.message);
    }
}

selectButton.addEventListener("click", () => fileInput.click());
fileInput.addEventListener("change", uploadFiles);

Spara index.js fil.

Den här koden ansluter knappen Välj och ladda upp filer till det dolda file-input elementet. clickKnapphändelsen utlöser filindatahändelsen click och visar filväljaren. När du har valt filer och stäng dialogrutan input inträffar händelsen och uploadFiles funktionen anropas. Den här funktionen skapar ett BlockBlobClient-objekt och anropar sedan funktionen uploadBrowserData i webbläsaren för varje fil som du har valt. Varje anrop returnerar Promise en . Varje Promise läggs till i en lista så att alla kan vänta tillsammans, vilket gör att filerna laddas upp parallellt.

Ta bort blobar

Ta bort filer från lagringscontainern när du klickar på knappen Ta bort valda filer. Lägg till följande kod i slutet avindex.jsfilen.

const deleteFiles = async () => {
    try {
        if (fileList.selectedOptions.length > 0) {
            reportStatus("Deleting files...");
            for (const option of fileList.selectedOptions) {
                await containerClient.deleteBlob(option.text);
            }
            reportStatus("Done.");
            listFiles();
        } else {
            reportStatus("No files selected.");
        }
    } catch (error) {
        reportStatus(error.message);
    }
};

deleteButton.addEventListener("click", deleteFiles);

Spara index.js fil.

Den här koden anropar funktionen ContainerClient.deleteBlob för att ta bort varje fil som valts i listan. Den anropar sedan listFiles funktionen som visades tidigare för att uppdatera innehållet i listan Filer.

Kör koden

Om du vill köra koden i Visual Studio Code-felsökaren konfigurerar du launch.json-filen för webbläsaren.

Konfigurera felsökningsprogrammet

Konfigurera felsökningstillägget i Visual Studio Code:

1. Välj Kör > Lägg till konfiguration
2. Välj Edge, Chrome eller Firefox, beroende på vilket tillägg du installerade i avsnittet Förutsättningar tidigare.

När du lägger till en ny konfiguration skapas en launch.json-fil som öppnas i redigeraren. Ändra filen launch.json så att url värdet är , som du ser http://localhost:1234/index.html här:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "edge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:1234/index.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

När du har uppdaterat sparar du filen launch.json. Den här konfigurationen anger Visual Studio kod vilken webbläsare som ska öppnas och vilken URL som ska läsas in.

Starta webbservern

Om du vill starta webbservern för lokal utveckling väljer du Visa > Terminal för att öppna ett konsolfönster i Visual Studio Code och anger sedan följande kommando.

parcel index.html

Bundles bundles your code and starts a local development server for your page at http://localhost:1234/index.html . Ändringar som du görindex.js skapas automatiskt och visas på utvecklingsservern när du sparar filen.

Om du får ett meddelande om att det inte gick att använda den konfigurerade porten 1234 kan du ändra porten genom att köra kommandot parcel -p <port#> index.html . I filen launch.json uppdaterar du porten i URL-sökvägen så att den matchar.

Starta felsökning

Kör sidan i felsökningsprogrammet och få en känsla för hur bloblagring fungerar. Om det uppstår några fel visas felmeddelandet som visas i fönstret Status på webbsidan.

Om du index.html i webbläsaren med felsökningsprogrammet Visual Studio Code kopplat väljer du Kör > Starta felsökning eller trycker på F5 i Visual Studio Code.

Använda webbappen

I Azure Portalkan du verifiera resultatet av API-anropen genom att följa stegen nedan.

Steg 1 – Skapa en container

1. I webbappen väljer du Skapa container. Statusen anger att en container har skapats.
2. För att verifiera i Azure Portal väljer du ditt lagringskonto. Välj containrar under Blob Service. Kontrollera att den nya containern visas. (Du kan behöva välja Uppdatera.)

Steg 2 – Upload en blob till containern

1. Skapa och spara en testfil på den lokala datorn, till exempel test.txt.
2. I webbappen klickar du på Välj och ladda upp filer.
3. Bläddra till testfilen och välj sedan Öppna. Statusen anger att filen har laddats upp och att fillistan har hämtats.
4. I Azure Portal väljer du namnet på den nya container som du skapade tidigare. Kontrollera att testfilen visas.

Steg 3 – Ta bort bloben

1. I webbappen går du till Filer och väljer testfilen.
2. Välj Ta bort markerade filer. Statusen anger att filen har tagits bort och att containern inte innehåller några filer.
3. I Azure Portal du Uppdatera. Kontrollera att inga blobar hittades.

Steg 4 – Ta bort containern

1. I webbappen väljer du Ta bort container. Statusen anger att containern har tagits bort.
2. I Azure Portal väljer du <account-name> | Containerlänk längst upp till vänster i portalfönstret.
3. Välj Uppdatera. Den nya containern försvinner.
4. Stäng webbappen.

Rensa resurser

Klicka på terminalkonsolen i Visual Studio Code och tryck på CTRL +C för att stoppa webbservern.

Om du vill rensa de resurser som skapades under den här snabbstarten går du till Azure Portal och tar bort resursgruppen som du skapade i avsnittet Förutsättningar.

Nästa steg

I den här snabbstarten har du lärt dig att ladda upp, lista och ta bort blobar med hjälp av JavaScript. Du har också lärt dig hur du skapar och tar bort en bloblagringscontainer.

Självstudier, exempel, snabbstarter och annan dokumentation finns här:

• Mer information finns i Azure Blob Storage-klientbiblioteket för JavaScript.
• Om du vill se Blob Storage-exempelappar fortsätter du till Azure Blob Storage-klientbiblioteket v12 JavaScript-exempel.