Rychlý start: Správa objektů blob pomocí sady JavaScript v12 SDK v prohlížeči

Úložiště objektů blob v Azure je optimalizované pro ukládání velkých objemů nestrukturovaných dat. Objekty blob jsou objekty, které mohou obsahovat textová nebo binární data, včetně obrázků, dokumentů, streamovaných médií a archivních dat. V tomto rychlém startu se naučíte spravovat objekty blob pomocí JavaScriptu v prohlížeči. Budete nahrávat a vy listovat objekty blob a vytvářet a odstraňovat kontejnery.

Další prostředky:

• Referenční dokumentace k rozhraní API
• Zdrojový kód knihovny
• Balíček (npm)
• ukázky

Požadavky

• Účet Azure s aktivním předplatným
• Účet Azure Storage úložiště
• Node.js
• Microsoft Visual Studio Code
• Rozšíření Visual Studio Code pro ladění prohlížeče, například:
  • Ladicí program pro Microsoft Edge
  • Ladicí program pro Chrome
  • Ladicí program pro Firefox

Objektový model

Úložiště objektů blob nabízí tři typy prostředků:

• Účet úložiště
• Kontejner v účtu úložiště
• Objekt blob v kontejneru

Na následujícím diagramu jsou vztahy těchto prostředků.

V tomto rychlém startu použijete k interakci s těmito prostředky následující třídy JavaScriptu:

• BlobServiceClient:Třída BlobServiceClient umožňuje manipulovat s Azure Storage a kontejnery objektů blob.
• ContainerClient:Třída ContainerClient umožňuje manipulovat s Azure Storage kontejnery a jejich objekty blob.
• BlockBlobClient:Třída BlockBlobClient umožňuje manipulovat s Azure Storage objekty blob.

Nastavení

Tato část vás provede přípravou projektu pro práci s klientskou knihovnou Azure Blob Storage v12 pro JavaScript.

Vytvoření pravidla CORS

Než vaše webová aplikace bude mít z klienta přístup k úložišti objektů blob, musíte nakonfigurovat svůj účet tak, aby povoll sdílení prostředků mezi zdroji neboCORS.

V Azure Portal vyberte svůj účet úložiště. Pokud chcete definovat nové pravidlo CORS, přejděte do části Nastavení a vyberte CORS. Pro účely tohoto rychlého startu vytvoříte otevřené pravidlo CORS:

Následující tabulka obsahuje popis jednotlivých nastavení CORS a vysvětlení hodnot použitých k definici pravidla.

Po vyplnění polí hodnotami z této tabulky klikněte na tlačítko Uložit.

Vytvoření sdíleného přístupového podpisu

Sdílený přístupový podpis (SAS) používá kód spuštěný v prohlížeči k autorizaci požadavků služby Azure Blob Storage. Díky použití SAS může klient autorizovat přístup k prostředkům úložiště, aniž by měl přístupový klíč nebo připojovací řetězec účtu. Další informace o SAS najdete v tématu Použití sdílených přístupových podpisů (SAS).

Následujícím postupem získáte adresu URL Blob service SAS:

1. V Azure Portal vyberte svůj účet úložiště.
2. Přejděte do části Zabezpečení a sítě a vyberte Sdílený přístupový podpis.
3. Posuňte se dolů a klikněte na tlačítko Vygenerovat SAS a připojovací řetězec.
4. Posuňte se dolů a vyhledejte pole Blob service SAS URL.
5. Klikněte na tlačítko Zkopírovat do schránky na pravém konci pole Blob service SAS URL.
6. Uložte zkopírované adresy URL někam pro použití v nadcházejícím kroku.

Přidání klientské knihovny služby Azure Blob Storage

Na místním počítači vytvořte novou složku s názvem azure-blobs-js-browser a otevřete ji v Visual Studio Code.

Vyberte Zobrazit > terminálu a otevřete okno konzoly uvnitř Visual Studio Code. Spuštěním následujícího Node.js Správce balíčků (npm) v okně terminálu vytvořte soubor package.json.

npm init -y

Sada Azure SDK se skládá z mnoha samostatných balíčků. Na základě služeb, které chcete použít, si můžete vybrat, které balíčky potřebujete. Spuštěním npm následujícího příkazu v okně terminálu balíček @azure/storage-blob nainstalujte.

npm install --save @azure/storage-blob

Zabalte klientskou knihovnu úložiště objektů blob v Azure.

Pokud chcete na webu používat knihovny sady Azure SDK, převeďte kód tak, aby fungoval v prohlížeči. Můžete to udělat pomocí nástroje nazývaného bundler. Sdružování přebírá javascriptový kód napsaný Node.js konvencemi a převádí ho do formátu, který rozumí prohlížečům. V tomto článku Rychlý start se používá sesoučtení Prostředků.

Nainstalujte Nástroj spuštěním npm následujícího příkazu v okně terminálu:

npm install -g parcel-bundler

V Visual Studio Code otevřete soubor package.json a přidejte mezi položky a browserlist license dependencies . Cílí browserlist na nejnovější verzi tří oblíbených prohlížečů. Celý soubor package.json by teď měl vypadat takhle:

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

Uložte soubor package.json.

Import klientské knihovny služby Azure Blob Storage

Pokud chcete používat knihovny sady Azure SDK uvnitř JavaScriptu, naimportujte @azure/storage-blob balíček . V souboru vytvořte nový soubor Visual Studio Code který obsahuje následující kód JavaScriptu.

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

Uložte soubor jakoindex.js v adresáři azure-blobs-js-browser.

Implementace stránky HTML

V souboru vytvořte nový Visual Studio Code přidejte následující kód HTML.

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

Uložte soubor jakoindex.html ve složce azure-blobs-js-browser.

Příklady kódu

Příklad kódu ukazuje, jak pomocí klientské knihovny Azure Blob Storage pro JavaScript provést následující úlohy:

• Deklarace polí pro prvky uživatelského rozhraní
• Přidání informací o účtu úložiště
• Vytvoření objektů klienta
• Vytvoření a odstranění kontejneru úložiště
• Výpis objektů blob
• Upload objektů blob
• Odstraňovat objekty blob

Kód spustíte po přidání všech fragmentů kódu doindex.js souboru.

Deklarace polí pro prvky uživatelského rozhraní

Na konec tohoto souboru přidejte index.js kód.

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

Uložte index.js soubor.

Tento kód deklaruje pole pro každý prvek HTML a implementuje reportStatus funkci pro zobrazení výstupu.

V následujících částech přidejte za předchozí blok každý nový blok javascriptového kódu.

Přidání informací o účtu úložiště

Přidejte kód pro přístup k účtu úložiště. Zástupný text nahraďte vaší adresou URL Blob service SAS, kterou jste vygeneroval dříve. Na konec tohoto souboru přidejte index.js kód.

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

Uložte index.js soubor.

Vytvoření objektů klienta

Vytvořte objekty BlobServiceClient a ContainerClient pro interakci se službou Azure Blob Storage. Na konec tohoto souboru přidejte index.js kód.

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

Uložte index.js soubor.

Vytvoření a odstranění kontejneru úložiště

Po kliknutí na odpovídající tlačítko na webové stránce vytvořte a odstraňte kontejner úložiště. Na konec tohoto souboru přidejte index.js kód.

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

Uložte index.js soubor.

Výpis objektů blob

Po kliknutí na tlačítko List files (Zobrazit seznam souborů) zobrazíte seznam obsahu kontejneru úložiště. Na konec tohoto souboru přidejte index.js kód.

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

Uložte index.js soubor.

Tento kód volá funkci ContainerClient.listBlobsFlat a pak pomocí iterátoru načte název každé vrácené položky blob. Pro každý BlobItem aktualizuje seznam Soubory s hodnotou vlastnosti name.

Upload objektů blob

Upload vyberte soubory do kontejneru úložiště, když kliknete na tlačítko Vybrat a nahrát soubory. Na konec tohoto souboru přidejte index.js kód.

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

Uložte index.js soubor.

Tento kód připojí tlačítko Vybrat a nahrát soubory ke skrytému file-input elementu. Událost tlačítka click aktivuje vstupní událost souboru a zobrazí výběr click souboru. Po výběru souborů a zavření dialogového okna dojde k události a input uploadFiles bude volána funkce . Tato funkce vytvoří objekt BlockBlobClient a potom pro každý soubor, který jste vybrali, zavolá funkci uploadBrowserData pouze pro prohlížeč. Každé volání vrátí Promise . Každý se přidá do seznamu, aby se všechny společně čekaly, což způsobí paralelní Promise nahrávání souborů.

Odstraňovat objekty blob

Když kliknete na tlačítko Odstranit vybrané soubory, odstraňte soubory z kontejneru úložiště. Na konec tohoto souboru přidejte index.js kód.

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

Uložte index.js soubor.

Tento kód volá funkci ContainerClient.deleteBlob, která odebere všechny soubory vybrané v seznamu. Potom zavolá dříve listFiles zobrazenou funkci, která aktualizuje obsah seznamu Soubory.

Spuštění kódu

Pokud chcete kód spustit v ladicím Visual Studio Code, nakonfigurujte pro svůj prohlížeč soubor launch.json.

Konfigurace ladicího programu

Nastavení rozšíření ladicího programu v Visual Studio Code:

1. Vyberte Spustit > Přidat konfiguraci.
2. V závislosti na tom, které rozšíření jste nainstalovali v předchozí části Požadavky, vyberte Edge, Chrome nebo Firefox.

Přidáním nové konfigurace se vytvoří soubor launch.json a otevře se v editoru. Upravte soubor launch.json tak, aby url hodnota byla , jak je http://localhost:1234/index.html znázorněno tady:

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

Po aktualizaci uložte soubor launch.json. Tato konfigurace říká Visual Studio Code, který prohlížeč se má otevřít a kterou adresu URL se má načíst.

Spuštění webového serveru

Pokud chcete spustit místní vývojový webový server, vyberte Zobrazit > Terminál. Otevře se okno konzoly uvnitř Visual Studio Code a pak zadejte následující příkaz.

parcel index.html

Přibalí váš kód a spustí místní vývojový server pro vaši stránku na http://localhost:1234/index.html adrese . Změny provedené v index.js se automaticky sestaví a projeví na vývojovém serveru při každém uložení souboru.

Pokud se zobrazí zpráva s oznámením, že se nakonfigurovaný port 1234 nepoužíl, můžete port změnit spuštěním příkazu parcel -p <port#> index.html . V souboru launch.json aktualizujte port v cestě URL tak, aby odpovídal.

Spuštění ladění

Spusťte stránku v ladicím programu a získejte informace o tom, jak funguje úložiště objektů blob. Pokud dojde k chybám, zobrazí se v podokně Stav na webové stránce přijatá chybová zpráva.

Pokud chcete index.html prohlížeči s připojeným ladicím programem Visual Studio Code, vyberte Spustit > Spustit ladění nebo stiskněte F5 v Visual Studio Code.

Použití webové aplikace

V Azure Portalmůžete ověřit výsledky volání rozhraní API podle následujících kroků.

Krok 1 – vytvoření kontejneru

1. Ve webové aplikaci vyberte Create container (Vytvořit kontejner). Stav označuje, že se kontejner vytvořil.
2. Pokud to chcete ověřit v Azure Portal, vyberte svůj účet úložiště. V části Blob service vyberte Kontejnery. Ověřte, že se nový kontejner zobrazí. (Možná budete muset vybrat Aktualizovat.)

Krok 2 – Upload objektu blob do kontejneru

1. Na místním počítači vytvořte a uložte testovací soubor, například test.txt.
2. Ve webové aplikaci klikněte na Vybrat a nahrát soubory.
3. Přejděte do testovacího souboru a pak vyberte Otevřít. Stav označuje, že se soubor nahrál a seznam souborů se načítá.
4. V Azure Portal vyberte název nového kontejneru, který jste vytvořili dříve. Ověřte, že se zobrazí testovací soubor.

Krok 3 – odstranění objektu blob

1. Ve webové aplikaci v části Soubory vyberte testovací soubor.
2. Vyberte Odstranit vybrané soubory. Stav značí, že se soubor odstranil a že kontejner neobsahuje žádné soubory.
3. V Azure Portal vyberte Aktualizovat. Ověřte, že vidíte, že se nenašly žádné objekty blob.

Krok 4 – odstranění kontejneru

1. Ve webové aplikaci vyberte Odstranit kontejner. Stav značí, že kontejner byl odstraněn.
2. V Azure Portal vyberte | <account-name> Kontejnery odkazují v levém horním rohu podokna portálu.
3. Vyberte Aktualizovat. Nový kontejner zmizí.
4. Zavřete webovou aplikaci.

Vyčištění prostředků

v Visual Studio Code klikněte na konzolu terminálu a stisknutím kombinace kláves CTRL + C zastavte webový server.

Pokud chcete vyčistit prostředky vytvořené v rámci tohoto rychlého startu, otevřete Azure Portal a odstraňte skupinu prostředků, kterou jste vytvořili v části požadavky .

Další kroky

V tomto rychlém startu jste zjistili, jak nahrát, vypsat a odstranit objekty BLOB pomocí JavaScriptu. Zjistili jste také, jak vytvořit a odstranit kontejner úložiště objektů BLOB.

Výukové programy, ukázky, rychlé starty a další dokumentaci najdete na webu:

• Další informace najdete v tématu Klientská knihovna pro úložiště objektů BLOB v Azure pro JavaScript.
• Ukázková aplikace služby Blob Storage najdete v ukázkách V12 JavaScriptu v klientské knihovně pro úložiště objektů BLOB v Azure.