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é mohou obsahovat textová nebo binární data, včetně obrázků, dokumentů, streamovaných médií a archivovaný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 kontejnery vytvoříte a odstraníte.

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

• Deklarace polí pro prvky uživatelského rozhraní
• Přidání informací o účtu úložiště
• Vytváření klientských objektů
• Vytvoření a odstranění kontejneru úložiště
• Výpis objektů blob
• Nahrání objektů blob
• Odstranění objektů blob

Další prostředky:

Ukázky referenčního | kódu knihovny api (balíček zdrojového kódu | npm) |

Požadavky

• Účet Azure s aktivním předplatným
• Účet služby 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 k prohlížeči

Pokud chcete prostřednictvím kódu programu získat přístup 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 nakonfigurovat svůj účet tak, aby umožňoval sdílení prostředků mezi zdroji nebo CORS.

Na webu 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É PŮVODY	*	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á předběžný požadavek OPTIONS do mezipaměti 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é

Zajistěte, aby všechna nastavení, která používáte v produkčním prostředí, zpřístupnilo minimální množství přístupu potřebné 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í řetězec SAS

Sdílený přístupový podpis (SAS) se používá kódem spuštěným v prohlížeči k autorizaci požadavků 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. Na webu 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 povolené služby a seznamte se s tokenem SAS, který bude mít přístup ke všem službám účtu úložiště:
   • Objekt blob
   • Soubor
   • Fronta
   • Table
4. Vyberte typy povolených prostředků, které chcete zahrnout:
   • Služba
   • Kontejner
   • Objekt
5. Zkontrolujte datum a čas zahájení a vypršení platnosti a zjistěte, že token SAS má ve výchozím nastavení omezenou životnost.
6. Posuňte se dolů a vyberte tlačítko Generovat SAS a připojovací řetězec.
7. Posuňte se dolů a vyhledejte pole ADRESY URL SAS služby Blob Service.
8. Vyberte tlačítko Kopírovat do schránky na úplně pravém konci pole ADRESY URL SAS služby Blob Service.
9. Uložte zkopírovanou adresu URL někam pro použití v nadcházejícím kroku.

Poznámka:

Token SAS vrácený portálem neobsahuje znak oddělovače (?) řetězce dotazu adresy URL. Pokud k adrese URL prostředku připojujete token SAS, nezapomeňte před připojením tokenu SAS k adrese URL prostředku připojit 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 pro projekt nový adresář.

   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 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 editoru Visual Studio Code nainstalujte balíček npm služby Azure Storage:

   npm install @azure/storage-blob
   

2. Nainstalujte balíček bundleru, 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ílem je browserlist nejnovější verze 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 souboru index.js přidejte následující kód pro přístup k účtu úložiště. <placeholder> Nahraďte dříve vygenerovanou adresou URL SAS služby Blob Service. Na konec souboru index.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 souboru index.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ě

Vytvořte a odstraňte kontejner úložiště, když na webové stránce vyberete odpovídající tlačítko. Na konec souboru index.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

Vypsat obsah kontejneru úložiště, když vyberete tlačítko Seznam souborů . Na konec souboru index.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ázev každého vráceného objektu blobItem . Pro každý z nich BlobItemaktualizuje seznam Files 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 souboru index.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 prvku. 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 uploadFiles funkce se zavolá. Tato funkce vytvoří Objekt BlockBlobClient a potom zavolá funkci uploadBrowserData pouze pro každý vybraný soubor. Každé volání vrátí Promisehodnotu . Každý Promise se přidá do seznamu, aby se všechny mohly čekat společně, což způsobí, že se soubory nahrají paralelně.

Odstraňovat objekty blob

Když vyberete tlačítko Odstranit vybrané soubory , odstraňte soubory z kontejneru úložiště. Na konec souboru index.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á listFiles funkci zobrazenou dříve, aby aktualizovala obsah seznamu Soubory .

Spuštění kódu

1. V terminálu editoru Visual Studio Code spusťte aplikaci.

   npm start
   

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

2. Přístup k webu pomocí prohlížeče 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. Na webu Azure Portal ověřte, že byl kontejner vytvořen. 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 pak vyberte Otevřít. Stav označuje, že se soubor nahrál a seznam souborů se načetl.
4. Na webu 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 se soubor odstranil a že kontejner neobsahuje žádné soubory.
3. Na webu 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 se kontejner odstranil.
2. Na webu 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 místnímu vytvoření těchto prostředků v emulátoru služby Azure Storage pro účely vývoje a testování můžete použít také balíček npm služby Azure Blob Storage.

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

1. Po dokončení tohoto rychlého startu blob-quickstart-v12 odstraňte adresář.
2. Pokud jste hotovi s použitím prostředku Azure Storage, odeberte skupinu prostředků pomocí některé z těchto metod:
   • Odebrání prostředku úložiště pomocí Azure CLI
   • Prostředek odeberete pomocí webu Azure Portal.

Další kroky

V tomto rychlém startu jste se naučili nahrávat, vypisovat a odstraňovat objekty blob pomocí JavaScriptu. Dozvěděli jste se také, jak vytvořit a odstranit kontejner úložiště objektů blob.

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

Dokumentace k Azure for JavaScript

• Další informace najdete v klientské knihovně azure Blob Storage pro JavaScript.
• Pokud chcete zobrazit ukázkové aplikace blob storage, pokračujte v ukázkách JavaScriptu pro Azure Blob Storage v12.