Quickstart: Blobs beheren met JavaScript v12 SDK in een browser

Azure Blob-opslag is geoptimaliseerd voor het opslaan van grote hoeveelheden ongestructureerde gegevens. Blobs zijn objecten die tekst of binaire gegevens kunnen bevatten, zoals afbeeldingen, documenten, streaming media en archiefgegevens. In deze quickstart leert u hoe u blobs beheert met behulp van JavaScript in een browser. U kunt blobs uploaden en weergeven en u kunt containers maken en verwijderen.

Aanvullende bronnen:

• API-referentiedocumentatie
• Broncode van bibliotheek
• Package (npm)
• Voorbeelden

Vereisten

• Een Azure-account met een actief abonnement
• Een Azure Storage-account
• Node.js
• Microsoft Visual Studio Code
• Een Visual Studio code-extensie voor foutopsporing in een browser, zoals:
  • Foutopsporingsprogramma voor Microsoft Edge
  • Foutopsporingsprogramma voor Chrome
  • Foutopsporingsprogramma voor Firefox

Objectmodel

Er zijn drie typen resources voor blobopslag:

• Het opslagaccount
• Een container in het opslagaccount
• Een blob in de container

Het volgende diagram geeft de relatie tussen deze resources weer.

In deze quickstart gebruikt u de volgende JavaScript-klassen om te communiceren met deze resources:

• BlobServiceClient: Met de klasse BlobServiceClient kunt u Azure Storage-resources en blob-containers bewerken.
• ContainerClient: Met de klasse ContainerClient kunt u Azure Storage-containers en de bijbehorende blobs bewerken.
• BlockBlobClient: Met de klasse BlockBlobClient kunt u Azure Storage-blobs bewerken.

Instellen

In dit gedeelte wordt uitgelegd hoe u een project voorbereidt voor gebruik met de Azure Blob Storage-clientbibliotheek v12 voor JavaScript.

Een CORS-regel maken

Voordat uw webtoepassing vanuit de client toegang kan krijgen tot een blob-opslag, moet het account worden geconfigureerd om cross-origin-resource sharing oftewel CORS in te schakelen.

Selecteer in de Azure-portal uw opslagaccount. Als u een nieuwe CORS-regel wilt definiëren, gaat u terug naar de sectie Instellingen en klikt u op CORS. Voor deze snelstart maakt u een open CORS-regel:

In de volgende tabel worden alle CORS-instellingen beschreven en de waarden voor het definiëren van de regel uitgelegd.

Nadat u de velden met de waarden uit deze tabel hebt ingevuld, klikt u op de knop Opslaan.

Handtekening voor gedeelde toegang maken

Shared Access Signature (handtekening voor gedeelde toegang, SAS) wordt gebruikt door de code die wordt uitgevoerd in de browser om aanvragen bij de Azure Blob-opslag te verifiëren. Als u een SAS gebruikt, kan de client toegang tot de opslagresources autoriseren zonder de toegangssleutel of verbindingsreeks van het account. Zie Handtekeningen voor gedeelde toegang gebruiken voor meer informatie over SAS.

Volg deze stappen om de Blob-service SAS-URL op te halen:

1. Selecteer in de Azure-portal uw opslagaccount.
2. Navigeer naar de sectie Beveiliging en netwerken en selecteer Shared Access Signature.
3. Schuif omlaag en klik op de knop SAS en verbindingsreeks genereren.
4. Schuif verder naar beneden en zoek het veld SAS-URL van Blob-service veld
5. Klik op de knop Kopiëren naar klembord aan de rechterkant van het veld SAS-URL van Blob-service.
6. Sla de gekopieerde URL ergens op voor gebruik in een volgende stap.

De clientbibliotheek voor Azure Blob-opslag toevoegen

Maak op uw lokale computer een nieuwe map met de naam azure-blobs-js-browser en open deze in Visual Studio Code.

Selecteer Weergave > Terminal om een consolevenster te openen in Visual Studio Code. Voer de volgende Node.js Packet Manager (NPM)-opdracht uit in het terminalvenster om een package.json-bestand te maken.

npm init -y

De Azure SDK bestaat uit een groot aantal afzonderlijke pakketten. U kunt kiezen welke pakketten u nodig hebt op basis van de services die u wilt gebruiken. Voer de volgende npm-opdracht uit in het terminalvenster om het @azure/storage-blob-pakket te installeren.

npm install --save @azure/storage-blob

De clientbibliotheek voor Azure Blob-opslag bundelen

Als u Azure SDK-bibliotheken op een website wilt gebruiken, zet u de code om zodat ze in de browser kunnen werken. U kunt dit doen met een hulpprogramma dat een bundelaar wordt genoemd. Bundelen neemt JavaScript-code die is geschreven met Node.js--conventies en converteert deze naar een indeling die door browsers wordt begrepen. In dit quickstart-artikel wordt gebruikgemaakt van de Parcel-bundelaar.

Installeer Parcel door de volgende npm-opdracht uit te voeren in het terminalvenster:

npm install -g parcel-bundler

Open in Visual Studio Code het bestand package.json en voeg een browserlist toe tussen de vermeldingen license en dependencies. Deze browserlist streeft naar de nieuwste versie van drie populaire browsers. Het volledige bestand package.json moet er nu als volgt uitzien:

{
  "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"
  }
}

Sla het package.json-bestand op.

De clientbibliotheek voor Azure Blob-opslag importeren

Als u Azure SDK-bibliotheken wilt gebruiken in JavaScript, importeert u het @azure/storage-blob-pakket. Maak een nieuw bestand in Visual Studio Code met de volgende JavaScript-code.

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

Sla het bestand op als index.js in de map azure-blobs-js-browser.

HTML-pagina implementeren

Maak een nieuw bestand in Visual Studio Code met de volgende HTML-code.

<!-- 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>

Sla het bestand op als index.html in de map azure-blobs-js-browser.

Codevoorbeelden

De voorbeeldcode laat zien hoe u de volgende taken kunt uitvoeren met de Azure Blob Storage-clientbibliotheek voor JavaScript:

• Velden declareren voor UI-elementen
• De gegevens van uw opslagaccount toevoegen
• Clientobjecten maken
• Een opslagcontainer maken en verwijderen
• Blobs vermelden
• Blobs uploaden
• Blobs verwijderen

U voert de code uit nadat u alle fragmenten hebt toegevoegd aan het bestand index.js.

Velden declareren voor UI-elementen

Voeg de volgende code toe aan het einde van het bestand index.js toe.

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

Sla het bestand index. js op.

Deze code declareert velden voor elk HTML-element en implementeert een reportStatus-functie om de uitvoer weer te geven.

Voeg in de volgende secties elk nieuw blok van JavaScript-code toe na het vorige blok.

Voeg de gegevens van uw opslagaccount toe

Voeg code toe om toegang te krijgen tot uw opslag account. Vervang de tijdelijke aanduiding door uw Blob service SAS-URL die u eerder hebt gegenereerd. Voeg de volgende code toe aan het einde van het bestand index.js toe.

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

Sla het bestand index. js op.

Clientobjecten maken

Maak BlobServiceClient en ContainerClient-objecten voor interactie met de Azure Blob Storage-service. Voeg de volgende code toe aan het einde van het bestand index.js toe.

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

Sla het bestand index. js op.

Een opslagcontainer maken en verwijderen

Maak en verwijder de opslagcontainer wanneer u op de bijbehorende knop op de webpagina klikt. Voeg de volgende code toe aan het einde van het bestand index.js toe.

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

Sla het bestand index. js op.

Blobs vermelden

Geef de inhoud van de opslagcontainer weer wanneer u op de knop Bestanden weergeven klikt. Voeg de volgende code toe aan het einde van het bestand index.js toe.

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

Sla het bestand index. js op.

Met deze code wordt de ContainerClient.listBlobsFlat-functie aangeroepen en wordt vervolgens een iterator gebruikt om de naam op te halen van elk geretourneerd BlobItem. Voor elke BlobItem wordt de Bestanden-lijst met de eigenschapswaarde naam bijgewerkt.

Blobs uploaden

Upload bestanden naar de opslagcontainer wanneer u klikt op de knop Bestanden selecteren en uploaden. Voeg de volgende code toe aan het einde van het bestand index.js toe.

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

Sla het bestand index. js op.

Deze code verbindt de knop Bestanden selecteren en uploaden naar het verborgen file-input-element. Met de gebeurtenisknop click wordt de gebeurtenis bestandsinvoer click geactiveerd en wordt de bestandenkiezer weergegeven. Nadat u bestanden hebt geselecteerd en het dialoogvenster hebt gesloten, treedt de gebeurtenis input op en wordt de functie uploadFiles aangeroepen. Deze functie maakt een BlockBlobClient--object en roept vervolgens de functie voor alleen-browser uploadBrowserData aan voor elk bestand dat u hebt geselecteerd. Elke aanroep retourneert een Promise. Elke Promise wordt toegevoegd aan een lijst, zodat ze allemaal tegelijk kunnen worden verwacht, waardoor de bestanden parallel worden geüpload.

Blobs verwijderen

Verwijder bestanden uit de opslagcontainer wanneer u klikt op de knop Geselecteerde bestanden verwijderen. Voeg de volgende code toe aan het einde van het bestand index.js toe.

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

Sla het bestand index. js op.

Met deze code wordt de functie ContainerClient.deleteBlob aangeroepen om elk bestand te verwijderen dat in de lijst is geselecteerd. Vervolgens wordt de eerder getoonde functie listFiles aangeroepen om de inhoud van de Bestanden-lijst te vernieuwen.

De code uitvoeren

Als u de code wilt uitvoeren in de Visual Studio Code-foutopsporing, configureert u het bestand launch.json voor uw browser.

Het foutopsporingsprogramma configureren

De uitbreiding voor foutopsporing in Visual Studio Code instellen:

1. Selecteer Uitvoeren > Configuratie toevoegen
2. Selecteer Microsoft Edge, Chrome of Firefox, afhankelijk van de extensie die eerder u hebt geïnstalleerd in het gedeelte Vereisten.

Als u een nieuwe configuratie toevoegt, wordt er een launch.json-bestand gemaakt en geopend in de editor. Wijzig het bestand launch.json zodat de url-waarde http://localhost:1234/index.html is, zoals hier wordt weergegeven:

{
    // 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}"
        }
    ]
}

Sla na het bijwerken het bestand launch.json op. Deze configuratie vertelt Visual Studio Code welke browser moet worden geopend en welke URL moet worden geladen.

De webserver starten

Als u de webserver voor lokale ontwikkeling wilt starten, selecteert u Weergeven > Terminal om een consolevenster te openen in Visual Studio Code, en voert u de volgende opdracht in.

parcel index.html

Parcel bundelt uw code en start een lokale ontwikkelserver voor uw pagina op http://localhost:1234/index.html. Wijzigingen die u aanbrengt in index.js worden automatisch op de ontwikkelingsserver gebouwd en weergegeven wanneer u het bestand opslaat.

Als u een bericht ontvangt met de melding geconfigureerde poort 1234 kan niet worden gebruikt, kunt u de poort wijzigen door de opdracht parcel -p <port#> index.html uit te voeren. In het bestand launch.json werkt u de poort in het URL-pad zodat deze overeenkomt.

Foutopsporing starten

Voer de pagina uit in het foutopsporingsprogramma en krijg een idee van de werking van blob-opslag. Als er fouten optreden, wordt het foutbericht weergegeven in het deelvenster Status op de webpagina.

Als u index.html in de browser wilt openen terwijl het Visual Studio Code-foutopsporingsprogramma is gekoppeld, selecteert u Run > Start Debugging of drukt u op F5 in Visual Studio Code.

De web-app gebruiken

In de Azure-portal kunt u de resultaten van de API-aanroepen controleren wanneer u de volgende stappen uitvoert.

Stap 1 - Een container maken

1. Selecteer in de web-app Container maken. De status geeft aan dat een container is gemaakt.
2. Selecteer uw opslagaccount om in de Azure-portal te verifiëren. Klik onder Blob service op Containers. Controleer of de nieuwe container wordt weergegeven. (Mogelijk moet u Vernieuwen selecteren.)

Stap 2 - Een blob uploaden naar de container

1. Maak een testbestand op uw lokale computer en sla dit op, bijvoorbeeld test.txt.
2. Klik in de web-app op Bestanden selecteren en uploaden.
3. Blader naar het testbestand en selecteer Openen. De status geeft aan dat het bestand is geüpload en dat de lijst met bestanden is opgehaald.
4. Selecteer in de Azure-portal de naam van de nieuwe container die u eerder hebt gemaakt. Controleer of het testbestand wordt weergegeven.

Stap 3 - De blob verwijderen

1. Selecteer in de web-app onder Bestanden het testbestand.
2. Selecteer Geselecteerde bestanden verwijderen. De status geeft aan dat het bestand is verwijderd en dat de container geen bestanden bevat.
3. Selecteer Vernieuwen in de Azure-portal. Controleer of Geen blobs gevonden kunt zien.

Stap 4 - De container verwijderen

1. Selecteer in de web-app Container verwijderen. De status geeft aan dat een container is verwijderd.
2. Selecteer in Azure Portal de koppeling <account-name> | Containers linksboven in het portaldeelvenster.
3. Selecteer Vernieuwen. De nieuwe container verdwijnt.
4. Sluit de web-app.

Resources opschonen

Klik op de console Terminal in Visual Studio Code en druk op CTRL + C om de webserver te stoppen.

Als u de resources wilt opschonen die tijdens deze quickstart zijn gemaakt, gaat u naar de Azure-portal en verwijdert u de resourcegroep die u hebt gemaakt in de sectie Vereisten.

Volgende stappen

In deze quickstart hebt u geleerd hoe u blobs kunt uploaden, downloaden, weergeven en verwijderen met behulp van JavaScript. U hebt ook geleerd hoe u een blob-opslagcontainer maakt en verwijdert.

Voor zelfstudies, voorbeelden, quickstarts en andere documentatie gaat u naar:

• Zie de Azure Blob-opslag-clientbibliotheek voor JavaScriptvoor meer informatie.
• Als u voorbeeld-apps voor blob-opslag wilt zien, gaat u verder met Voorbeelden van Azure Blob-opslag-clientbibliotheek v12 JavaScript.