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

  • Artikel

Azure Blob Storage är optimerat för lagring av stora mängder ostrukturerade data. Blobar är objekt som kan innehålla text eller binära data, inklusive bilder, dokument, strömmande media och arkivdata. 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.

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

Ytterligare resurser:

API-referens | Källkod | för bibliotekPaket (npm) | Prover

Förutsättningar

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.

Diagram över blobblagringens arkitektur

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-resurser och blobcontainrar.
  • ContainerClient: Med ContainerClient klassen kan du ändra Azure Storage-containrar och deras blobar.
  • BlockBlobClient: Med BlockBlobClient klassen kan du ändra Azure Storage-blobar.

Konfigurera lagringskonto för webbläsaråtkomst

För att programmatiskt komma åt ditt lagringskonto från en webbläsare måste du konfigurera CORS-åtkomst och skapa en SAS-anslutningssträng.

Skapa en CORS-regel

Innan webbprogrammet kan komma åt bloblagring 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 till avsnittet Inställningar och väljer CORS. I den här snabbstarten skapar du en fullständigt öppen CORS-regel:

CORS-inställningar för Azure Blob Storage-konto

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

Inställningen Värde Beskrivning
TILLÅTNA URSPRUNG * Accepterar en kommaavgränsad lista över domäner som är inställda som godkänt ursprung. Om du anger värdet till * ges alla domäner åtkomst till lagringskontot.
TILLÅTNA METODER DELETE, GET, HEAD, MERGE, POST, OPTIONS och PUT Listar de HTTP-verb som kan köras mot lagringskontot. För den här snabbstarten väljer du alla tillgängliga alternativ.
TILLÅTNA RUBRIKER * Definierar en lista över begäranderubriker (inklusive prefixrubriker) som tillåts av lagringskontot. Om du ställer in värdet på * får alla rubriker åtkomst.
EXPONERADE RUBRIKER * Listar de svarsrubriker som tillåts av kontot. Om du ställer in värdet på * får kontot skicka alla rubriker.
MAX ÅLDER 86400 Den maximala tiden som webbläsaren cachelagrar begäran om förhandsversionen av ALTERNATIV på några sekunder. Ett värde på 86400 innebär cachelagring under ett helt dygn.

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

Viktigt

Se till att alla inställningar som du använder i produktion exponerar den minsta mängd åtkomst som krävs för ditt lagringskonto för att upprätthålla säker åtkomst. De CORS-inställningar som beskrivs här är lämpliga för en snabbstart eftersom de innebär en flexibel säkerhetsprincip. Inställningarna rekommenderas dock inte i verkliga sammanhang.

Skapa en SAS-anslutningssträng

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 SAS-URL:en för Blob-tjänsten:

  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. Granska tillåtna tjänster för att förstå att SAS-token har åtkomst till alla dina lagringskontotjänster:
    • Blob
    • Fil
    • Kö
    • Tabell
  4. Välj de tillåtna resurstyper som ska inkluderas:
    • Tjänst
    • Container
    • Objekt
  5. Granska start- och förfallodatum/-tiden för att förstå att SAS-token har en begränsad livslängd som standard.
  6. Rulla nedåt och välj knappen Generera SAS och anslutningssträng .
  7. Rulla nedåt ytterligare och leta upp FÄLTET FÖR SAS-URL för Blob-tjänsten
  8. Välj knappen Kopiera till Urklipp längst till höger i fältet SAS-URL för Blob-tjänsten .
  9. Spara den kopierade URL:en någonstans för användning i ett kommande steg.

Anteckning

SAS-token som returneras av portalen innehåller inte avgränsartecknet (?) för URL-frågesträngen. Om du lägger till SAS-token till en resurs-URL ska du komma ihåg att lägga till avgränsartecknet i resurs-URL:en innan du lägger till SAS-token.

Skapa JavaScript-projektet

Skapa ett JavaScript-program med namnet blob-quickstart-v12.

  1. I ett konsolfönster (till exempel cmd, PowerShell eller Bash) skapar du en ny katalog för projektet.

    mkdir blob-quickstart-v12

  2. Växla till den nyligen skapade katalogen blob-quickstart-v12 .

    cd blob-quickstart-v12

  3. Skapa en package.json.

    npm init -y

  4. Öppna projektet i Visual Studio Code:

    code .

Installera npm-paketet för bloblagring

  1. Installera Azure Storage npm-paketet i en Visual Studio Code-terminal:

    npm install @azure/storage-blob

  2. Installera ett paketpaket för att paketera filerna och paketet för webbläsaren:

    npm install parcel

    Om du planerar att använda en annan bundler kan du läsa mer om paketering av Azure SDK.

Konfigurera webbläsarpaket

  1. Öppna filen package.json i Visual Studio Code och lägg till en browserlist. Detta browserlist är avsett för den senaste versionen av populära webbläsare. Den fullständiga package.json-filen bör nu se ut så här:

    "browserslist": [
  "last 1 Edge version",
  "last 1 Chrome version",
  "last 1 Firefox version",
  "last 1 safari version",
  "last 1 webkit version"
],

  2. Lägg till ett startskript för att paketa webbplatsen:

    "scripts": {
  "start": "parcel ./index.html"
},

Skapa HTML-filen

  1. Skapa index.html och lägg till följande HTML-kod:

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

<body>
    <button id="create-container-button">Create 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>
    <button id="delete-container-button">Delete container</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 type="module" src="./index.js"></script>

</html>

Skapa JavaScript-filen

Från projektkatalogen:

  1. Skapa en ny fil med namnet index.js.

  2. Lägg till Azure Storage npm-paketet.

    const { BlobServiceClient } = require("@azure/storage-blob");

Deklarera fält för gränssnittselement

Lägg till DOM-element för användarinteraktion:

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

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

Lägga till information om ditt lagringskonto

Lägg till följande kod i slutet av index.js-filen för att få åtkomst till ditt lagringskonto. <placeholder> Ersätt med din SAS-URL för Blob-tjänsten som du genererade tidigare. Lägg till följande kod i slutet av index.js-filen .

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

Skapa klientobjekt

Skapa BlobServiceClient - och ContainerClient-objekt för att ansluta till ditt lagringskonto. Lägg till följande kod i slutet av index.js-filen .

// 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);

Skapa och ta bort en lagringscontainer

Skapa och ta bort lagringscontainern när du väljer motsvarande knapp på webbsidan. Lägg till följande kod i slutet av index.js-filen .

const createContainer = async () => {
    try {
        reportStatus(`Creating container "${containerName}"...`);
        await containerClient.create();
        reportStatus(`Done. URL:${containerClient.url}`);
    } 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);

Lista blobar

Visa en lista över innehållet i lagringscontainern när du väljer knappen Lista filer . Lägg till följande kod i slutet av index.js-filen .

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

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 BlobItemuppdaterar den listan Filer med värdet för namnegenskapen .

Ladda upp blobar till en container

Ladda upp filer till lagringscontainern när du väljer knappen Välj och ladda upp filer . Lägg till följande kod i slutet av index.js-filen .

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

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

Ta bort blobar

Ta bort filer från lagringscontainern när du väljer knappen Ta bort valda filer . Lägg till följande kod i slutet av index.js-filen .

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

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

Kör koden

  1. Kör appen från en Visual Studio Code-terminal.

    npm start

    Den här processen paketar filerna och startar en webbserver.

  2. Öppna webbplatsen med en webbläsare med hjälp av följande URL:

    http://localhost:1234

Steg 1: Skapa en container

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

Steg 2: Ladda upp en blob till containern

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

Steg 3: Ta bort bloben

  1. Välj testfilen under Filer i webbappen.
  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 väljer 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 <kontonamnet> | Containerlänk längst upp till vänster i portalfönstret.
  3. Välj Uppdatera. Den nya containern försvinner.
  4. Stäng webbappen.

Använda lagringsemulatorn

Den här snabbstarten skapade en container och blob i Azure-molnet. Du kan också använda Azure Blob Storage npm-paketet för att skapa dessa resurser lokalt i Azure Storage-emulatorn för utveckling och testning.

Rensa resurser

  1. När du är klar med den här snabbstarten blob-quickstart-v12 tar du bort katalogen.
  2. Om du är klar med din Azure Storage-resurs tar du bort resursgruppen med någon av metoderna:

Nästa steg

I den här snabbstarten har du lärt dig hur du laddar upp, listar och tar 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 i:

Dokumentation om Azure för JavaScript