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

Azure Blob Storage je optimalizované pro ukládání velkých objemů nestrukturovaných dat. Objekty blob jsou objekty, které můžou obsahovat textová nebo binární data, včetně obrázků, dokumentů, streamovaných médií a archivačních dat. V tomto rychlém startu se naučíte spravovat objekty blob pomocí JavaScriptu v prohlížeči. Nahrajete a vypíšete objekty blob a vytvoříte a odstraníte kontejnery.

Ukázkový kód ukazuje, jak provést následující úlohy pomocí klientské knihovny azure Blob Storage pro JavaScript:

• 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
• Nahrání objektů blob
• Odstraňovat objekty blob

Další prostředky:

Referenční informace k | rozhraní APIZdrojový kód | knihovnyBalíček (npm) | Vzorky

Požadavky

• Účet Azure s aktivním předplatným
• Účet Azure Storage
• Node.js LTS
• Microsoft Visual Studio Code

Objektový model

Blob Storage 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 prostředky Azure Storage a kontejnery objektů blob.
• ContainerClient: Třída ContainerClient umožňuje manipulovat s kontejnery Azure Storage a jejich objekty blob.
• BlockBlobClient: Třída BlockBlobClient umožňuje manipulovat s objekty blob služby Azure Storage.

Konfigurace účtu úložiště pro přístup z prohlížeče

Pokud chcete programově přistupovat k účtu úložiště z webového prohlížeče, musíte nakonfigurovat přístup CORS a vytvořit připojovací řetězec SAS.

Vytvoření pravidla CORS

Aby vaše webová aplikace mohla přistupovat k úložišti objektů blob z klienta, musíte účet nakonfigurovat tak, aby umožňoval sdílení prostředků mezi zdroji neboli CORS.

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 plně otevřené pravidlo CORS:

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

Nastavení	Hodnota	Popis
POVOLENÉ ZDROJE	*	Přijímá čárkami oddělený seznam domén nastavených jako přijatelné zdroje. Nastavením této hodnoty na * se povolí přístup k účtu úložiště ze všech domén.
POVOLENÉ METODY	DELETE, GET, HEAD, MERGE, POST, OPTIONS a PUT	Uvádí povolené příkazy HTTP, které je možné spouštět proti účtu úložiště. Pro účely tohoto rychlého startu vyberte všechny dostupné možnosti.
POVOLENÉ HLAVIČKY	*	Definuje seznam hlaviček požadavku (včetně hlaviček s předponou), které účet úložiště povoluje. Nastavením této hodnoty na * se povolí přístup všem hlavičkám.
VYSTAVENÉ HLAVIČKY	*	Uvádí hlavičky odpovědi, které účet povoluje. Nastavením této hodnoty na * se účtu povolí odesílání jakýchkoli hlaviček.
MAX AGE	86400	Maximální doba, po kterou prohlížeč ukládá do mezipaměti předběžný požadavek OPTIONS v sekundách. Hodnota 86400 povolí uchování v mezipaměti po celý den.

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

Důležité

Ujistěte se, že všechna nastavení, která použijete v produkčním prostředí, zveřejňují minimální potřebný přístup k vašemu účtu úložiště, aby se zachoval zabezpečený přístup. Zde popsaná nastavení CORS jsou vhodná pro účely rychlého startu, protože definují mírné zásady zabezpečení. Tato nastavení se však nedoporučují pro kontext skutečného světa.

Vytvoření připojovacího řetězce SAS

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

Pokud chcete získat adresu URL SAS služby Blob Service, postupujte takto:

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. Projděte si téma Povolené služby , abyste pochopili, že token SAS bude mít přístup ke všem službám účtu úložiště:
   • Objekt blob
   • Soubor
   • Fronta
   • Tabulka
4. Vyberte Povolené typy prostředků , které se mají zahrnout:
   • Služba
   • Kontejner
   • Objekt
5. Projděte si datum a čas zahájení a vypršení platnosti, abyste zjistili, že token SAS má ve výchozím nastavení omezenou životnost.
6. Posuňte se dolů a vyberte tlačítko Generate SAS and connection string (Vygenerovat SAS a připojovací řetězec ).
7. Posuňte se dál dolů a vyhledejte pole Adresa URL SAS služby Blob Service .
8. Na pravé straně pole Adresa URL SAS služby Blob Service vyberte tlačítko Zkopírovat do schránky.
9. Zkopírovanou adresu URL si někam uložte, aby ji bylo možné použít v dalším kroku.

Poznámka

Token SAS vrácený portálem neobsahuje znak oddělovače (?) pro řetězec dotazu adresy URL. Pokud k adrese URL prostředku připojujete token SAS, nezapomeňte před přidáním tokenu SAS připojit k adrese URL prostředku znak oddělovače.

Vytvoření projektu JavaScriptu

Vytvořte javascriptovou aplikaci s názvem blob-quickstart-v12.

1. V okně konzoly (například cmd, PowerShell nebo Bash) vytvořte nový adresář pro projekt.

   mkdir blob-quickstart-v12
   

2. Přepněte do nově vytvořeného adresáře blob-quickstart-v12 .

   cd blob-quickstart-v12
   

3. Vytvořte soubor package.json.

   npm init -y
   

4. Otevřete projekt v editoru Visual Studio Code:

   code .
   

Instalace balíčku npm pro úložiště objektů blob

1. V terminálu Visual Studio Code nainstalujte balíček Npm služby Azure Storage:

   npm install @azure/storage-blob
   

2. Nainstalujte balíček bundler, který seskupí soubory a balíček pro prohlížeč:

   npm install parcel
   

   Pokud plánujete použít jiný bundler, přečtěte si další informace o sdružování sady Azure SDK.

Konfigurace sdružování prohlížečů

1. V editoru Visual Studio Code otevřete soubor package.json a přidejte browserlist. Cílí browserlist na nejnovější verzi oblíbených prohlížečů. Úplný soubor package.json by teď měl vypadat takto:

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

2. Přidejte spouštěcí skript pro vytvoření balíčku webu:

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

Vytvoření souboru HTML

1. Vytvořte index.html a přidejte následující kód HTML:

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

Vytvoření souboru JavaScriptu

Z adresáře projektu:

1. Vytvořte nový soubor s názvem index.js.

2. Přidejte balíček Npm služby Azure Storage.

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

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

Přidání elementů DOM pro interakci uživatele:

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

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

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

Na konec souboruindex.js přidejte následující kód pro přístup k vašemu účtu úložiště. Nahraďte adresou <placeholder> URL SAS služby Blob Service, kterou jste vygenerovali dříve. Na konec souboruindex.js přidejte následující kód.

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

Vytvoření objektů klienta

Vytvořte objekty BlobServiceClient a ContainerClient pro připojení k účtu úložiště. Na konec souboruindex.js přidejte následující 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);

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

Když vyberete odpovídající tlačítko na webové stránce, vytvořte a odstraňte kontejner úložiště. Na konec souboruindex.js přidejte následující kód.

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

Výpis objektů blob

Když vyberete tlačítko Zobrazit seznam souborů , vypište obsah kontejneru úložiště. Na konec souboruindex.js přidejte následující 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);

Tento kód volá funkci ContainerClient.listBlobsFlat a pak pomocí iterátoru načte názvy jednotlivých vrácených objektů blobItem . Pro každou BlobItempoložku aktualizuje seznam Soubory hodnotou vlastnosti name .

Nahrání objektů blob do kontejneru

Když vyberete tlačítko Vybrat a nahrát soubory , nahrajte soubory do kontejneru úložiště. Na konec souboruindex.js přidejte následující 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);

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í click událost souboru a zobrazí výběr souboru. Po výběru souborů a zavření dialogového okna dojde k input události a zavolá se uploadFiles funkce. Tato funkce vytvoří objekt BlockBlobClient a pak pro každý vybraný soubor zavolá funkci uploadBrowserData pouze v prohlížeči. Každé volání vrátí .Promise Každý z nich Promise se přidá do seznamu, aby je bylo možné očekávat společně, což způsobí paralelní nahrávání souborů.

Odstraňovat objekty blob

Když vyberete tlačítko Odstranit vybrané soubory , odstraňte soubory z kontejneru úložiště. Na konec souboruindex.js přidejte následující 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);

Tento kód volá funkci ContainerClient.deleteBlob , která odebere každý soubor vybraný v seznamu. Potom zavolá funkci zobrazenou listFiles dříve, aby aktualizovala obsah seznamu Soubory .

Spuštění kódu

1. Z terminálu Editoru Visual Studio Code spusťte aplikaci.

   npm start
   

   Tento proces seskupí soubory a spustí webový server.

2. Přístup k webu v prohlížeči pomocí následující adresy URL:

   http://localhost:1234
   

Krok 1: Vytvoření kontejneru

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

Krok 2: Nahrání 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 vyberte Vybrat a nahrát soubory.
3. Přejděte k testovacímu souboru a vyberte Otevřít. Stav označuje, že se soubor nahrál a že se načetl seznam souborů.
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 označuje, že soubor byl odstraněn a že kontejner neobsahuje žádné soubory.
3. V Azure Portal vyberte Aktualizovat. Ověřte, že se nenašly žádné objekty blob.

Krok 4: Odstranění kontejneru

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

Použití emulátoru úložiště

Tento rychlý start vytvořil kontejner a objekt blob v cloudu Azure. K vytvoření těchto prostředků místně v emulátoru služby Azure Storage pro účely vývoje a testování můžete také použít balíček npm služby Azure Blob Storage.

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

1. Až tento rychlý start dokončíte, odstraňte blob-quickstart-v12 adresář.
2. Pokud jste s používáním prostředku Azure Storage hotovi, odeberte skupinu prostředků pomocí jedné z těchto metod:
   • Odebrání prostředku úložiště pomocí Azure CLI
   • K odebrání prostředku použijte Azure Portal.

Další kroky

V tomto rychlém startu jste zjistili, jak odesílat, vypisovat a odstraňovat objekty blob pomocí JavaScriptu. Také jste se dozvěděli, jak vytvořit a odstranit kontejner úložiště objektů blob.

Kurzy, ukázky, rychlá zprovoznění a další dokumentaci najdete tady:

Dokumentace k Azure pro JavaScript

• Další informace najdete v klientské knihovně služby Azure Blob Storage pro JavaScript.
• Pokud chcete zobrazit ukázkové aplikace služby Blob Storage, pokračujte ukázkou javascriptové klientské knihovny služby Azure Blob Storage v12.