Rövid útmutató: Blobok kezelése JavaScript v12 SDK-val böngészőben

Az Azure Blob Storage nagy mennyiségű strukturálatlan adat tárolására van optimalizálva. A blobok olyan objektumok, amelyek szöveges vagy bináris adatokat tárolhatnak, beleértve a képeket, dokumentumokat, streamelési adathordozókat és archív adatokat. Ebből a rövid útmutatóból megtudhatja, hogyan kezelheti a blobokat a JavaScript használatával egy böngészőben. Blobokat fog feltölteni és listázni, valamint tárolókat fog létrehozni és törölni.

A példakód bemutatja, hogyan végezheti el a következő feladatokat az Azure Blob Storage JavaScripthez készült ügyfélkódtárával:

• Felhasználói felületi elemek mezőinek deklarálása
• Tárfiók adatainak hozzáadása
• Ügyfélobjektumok létrehozása
• Tároló létrehozása és törlése
• Blobok listázása
• Blobok feltöltése
• Blobok törlése

További források:

API-referencia | Kódtár forráskódja | Csomag (npm) | Minták

Előfeltételek

• Aktív előfizetéssel rendelkező Azure-fiók
• Azure Storage-fiók
• Node.js LTS
• Microsoft Visual Studio Code

Objektummodell

A Blob Storage háromféle erőforrást kínál:

• A tárfiók
• Tároló a tárfiókban
• Blob a tárolóban

Az alábbi ábra az ezen erőforrások közötti kapcsolatot mutatja be.

Ebben a rövid útmutatóban az alábbi JavaScript-osztályokkal fogja használni ezeket az erőforrásokat:

• BlobServiceClient: A BlobServiceClient osztály lehetővé teszi az Azure Storage-erőforrások és -blobtárolók módosítását.
• ContainerClient: A ContainerClient osztály lehetővé teszi az Azure Storage-tárolók és azok blobjának manipulálására.
• BlockBlobClient: Az BlockBlobClient osztály lehetővé teszi az Azure Storage-blobok módosítását.

Tárfiók konfigurálása böngészőhozzáféréshez

A tárfiók webböngészőből való programozott eléréséhez konfigurálnia kell a CORS-hozzáférést, és létre kell hoznia egy SAS-kapcsolati sztring.

CORS-szabály létrehozása

Ahhoz, hogy a webalkalmazás hozzáférhessen a blobtárolóhoz az ügyfélről, konfigurálnia kell a fiókját az eltérő eredetű erőforrások megosztásának engedélyezéséhez, vagy a CORS-t.

A Azure Portal válassza ki a tárfiókot. Új CORS-szabály definiálásához lépjen a Beállítások szakaszra, és válassza a CORS lehetőséget. Ebben a rövid útmutatóban egy teljesen megnyitott CORS-szabályt hoz létre:

A következő tábla az egyes CORS-beállításokat írja le, és ismerteti a szabály meghatározásához használt értékeket.

Beállítás	Érték	Leírás
ENGEDÉLYEZETT FORRÁSOK	*	Elfogadható eredetekként beállított tartományok vesszővel tagolt listáját fogadja el. A * érték beállításakor minden tartomány hozzáfér a tárfiókhoz.
ENGEDÉLYEZETT METÓDUSOK	DELETE, GET, HEAD, MERGE, POST, OPTIONS és PUT	A tárfiókon futtatható HTTP-műveleteket listázza. Ebben a rövid útmutatóban válassza ki az összes elérhető beállítást.
ENGEDÉLYEZETT FEJLÉCEK	*	A tárfiókban engedélyezett kérelemfejlécek listáját határozza meg (beleértve az előtaggal ellátott fejléceket). A * érték beállítása minden fejléc hozzáférését engedélyezi.
KÖZZÉTETT FEJLÉCEK	*	A fiók által engedélyezett válaszfejléceket listázza. A * érték beállítása esetén a fiók bármilyen fejlécet küldhet.
MAXIMÁLIS ÉLETKOR	86400	Az a maximális időtartam, amely alatt a böngésző másodpercek alatt gyorsítótárazza az elővizsgálati BEÁLLÍTÁSOK kérést. A 86400 érték lehetővé teszi, hogy a gyorsítótár egy teljes napig megmaradjon.

Miután kitöltötte a mezőket a táblázat értékeivel, válassza a Mentés gombot.

Fontos

Győződjön meg arról, hogy az éles környezetben használt beállítások biztosítják a tárfiókhoz a biztonságos hozzáférés fenntartásához szükséges minimális hozzáférési mennyiséget. Az itt leírt CORS-beállítások megfelelőek ehhez a rövid útmutatóhoz, mert laza biztonsági szabályzatot határoznak meg. Nem ajánlottak azonban valós környezetekben.

SAS-kapcsolati sztring létrehozása

A böngészőben futó kód a közös hozzáférésű jogosultságkód (SAS) használatával engedélyezi az Azure Blob Storage-kérelmeket. A SAS használatával az ügyfél a fiók hozzáférési kulcsa vagy kapcsolati sztringje nélkül is elvégezheti a tárolási erőforrásokhoz való hozzáférés engedélyeztetését. Az SAS-sel kapcsolatos további információkat a közös hozzáférésű jogosultságkód (SAS) használatát ismertető cikkben olvashat.

Kövesse az alábbi lépéseket a Blob service SAS URL-címének lekéréséhez:

1. A Azure Portal válassza ki a tárfiókot.
2. Lépjen a Biztonság + hálózatkezelés szakaszra, és válassza a Közös hozzáférésű jogosultságkód lehetőséget.
3. Tekintse át az Engedélyezett szolgáltatások szakaszt annak megértéséhez, hogy az SAS-jogkivonatnak hozzáférése lesz az összes tárfiók-szolgáltatáshoz:
   • Blob
   • Fájl
   • Üzenetsor
   • Tábla
4. Válassza ki a belefoglalandó engedélyezett erőforrástípusokat :
   • Szolgáltatás
   • Tároló
   • Objektum
5. Tekintse át a kezdési és a lejárati dátumot/időt annak megértéséhez, hogy az SAS-jogkivonat alapértelmezés szerint korlátozott élettartammal rendelkezik.
6. Görgessen le, és válassza az SAS és kapcsolati sztring létrehozása gombot.
7. Görgessen tovább, és keresse meg a Blob service SAS URL-címét
8. Válassza a Másolás a vágólapra gombot a Blob service SAS URL-cím mező jobb szélén.
9. Mentse a másolt URL-címet valahová egy későbbi lépésben való használatra.

Megjegyzés

A portál által visszaadott SAS-jogkivonat nem tartalmazza az URL-lekérdezési sztring elválasztó karakterét ('?'). Ha az SAS-jogkivonatot egy erőforrás URL-címéhez fűzi, ne felejtse el hozzáfűzni az elválasztó karaktert az erőforrás URL-címéhez, mielőtt hozzáfűzi az SAS-jogkivonatot.

A JavaScript-projekt létrehozása

Hozzon létre egy blob-quickstart-v12 nevű JavaScript-alkalmazást.

1. Hozzon létre egy új könyvtárat a projekthez egy konzolablakban (például cmd, PowerShell vagy Bash).

   mkdir blob-quickstart-v12
   

2. Váltson az újonnan létrehozott blob-quickstart-v12 könyvtárra.

   cd blob-quickstart-v12
   

3. Hozzon létre egy package.json fájlt.

   npm init -y
   

4. Nyissa meg a projektet a Visual Studio Code-ban:

   code .
   

Az npm-csomag telepítése a Blob Storage-hoz

1. Egy Visual Studio Code-terminálban telepítse az Azure Storage npm-csomagot:

   npm install @azure/storage-blob
   

2. Telepítsen egy bundler-csomagot a böngésző fájljainak és csomagjainak kötegeléséhez:

   npm install parcel
   

   Ha egy másik csomagkezelőt szeretne használni, további információ az Azure SDK összekapcsolásáról.

Böngészők összekapcsolásának konfigurálása

1. A Visual Studio Code-ban nyissa meg a package.json fájlt, és adjon hozzá egy browserlist. Ez browserlist a népszerű böngészők legújabb verzióját célozza meg. A teljes package.json fájlnak a következőképpen kell kinéznie:

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

2. Hozzon létre egy kezdőszkriptet a webhely kötegeléséhez:

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

A HTML-fájl létrehozása

1. Hozza létre index.html és adja hozzá a következő HTML-kódot:

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

A JavaScript-fájl létrehozása

A projektkönyvtárból:

1. Hozzon létre egy új fájlt index.js néven.

2. Adja hozzá az Azure Storage npm-csomagot.

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

Felhasználói felületi elemek mezőinek deklarálása

DOM-elemek hozzáadása a felhasználói interakcióhoz:

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

Ez a kód az egyes HTML-elemek mezőit deklarálja, és egy függvényt reportStatus implementál a kimenet megjelenítéséhez.

Tárfiók adatainak hozzáadása

Adja hozzá a következő kódot a index.js fájl végén a tárfiók eléréséhez. Cserélje le a <placeholder> elemet a korábban létrehozott Blob-szolgáltatás SAS URL-címére. Adja hozzá a következő kódot a index.js fájl végéhez.

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

Ügyfélobjektumok létrehozása

BlobServiceClient- és ContainerClient-objektumokat hozhat létre a tárfiókhoz való csatlakozáshoz. Adja hozzá a következő kódot a index.js fájl végéhez.

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

Tároló létrehozása és törlése

Hozza létre és törölje a tárolót, amikor kiválasztja a megfelelő gombot a weblapon. Adja hozzá a következő kódot a index.js fájl végéhez.

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

Blobok listázása

A Fájlok listázása gombra kattintva listázhatja a tároló tartalmát. Adja hozzá a következő kódot a index.js fájl végéhez.

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

Ez a kód meghívja a ContainerClient.listBlobsFlat függvényt , majd egy iterátort használ az egyes visszaadott BlobItemek nevének lekéréséhez. Mindegyik BlobItemesetében frissíti a Fájlok listát a névtulajdonság értékével.

Blobok feltöltése tárolóba

Fájlok feltöltése a tárolóba a Fájlok kiválasztása és feltöltése gombra kattintva. Adja hozzá a következő kódot a index.js fájl végéhez.

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

Ez a kód csatlakoztatja a Fájlok kiválasztása és feltöltése gombot a rejtett file-input elemhez. A gombesemény click elindítja a fájlbeviteli click eseményt, és megjeleníti a fájlválasztót. Miután kiválasztotta a fájlokat, és bezárta a párbeszédpanelt, az input esemény bekövetkezik, és meghívja a uploadFiles függvényt. Ez a függvény létrehoz egy BlockBlobClient objektumot, majd meghívja a csak böngészőben használható uploadBrowserData függvényt minden kiválasztott fájlhoz. Minden hívás egy értéket Promisead vissza. Mindegyik Promise hozzá lesz adva egy listához, hogy együtt várhassák őket, így a fájlok párhuzamosan tölthetők fel.

Blobok törlése

Ha a Kijelölt fájlok törlése gombra kattint, törölje a fájlokat a tárolóból. Adja hozzá a következő kódot a index.js fájl végéhez.

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

Ez a kód meghívja a ContainerClient.deleteBlob függvényt a listában kijelölt fájlok eltávolításához. Ezután meghívja a listFiles korábban látható függvényt a Fájlok lista tartalmának frissítéséhez.

A kód futtatása

1. Futtassa az alkalmazást egy Visual Studio Code-terminálból.

   npm start
   

   Ez a folyamat kötegeli a fájlokat, és elindít egy webkiszolgálót.

2. Nyissa meg a webhelyet egy böngészővel a következő URL-címmel:

   http://localhost:1234
   

1. lépés: Tároló létrehozása

1. A webalkalmazásban válassza a Tároló létrehozása lehetőséget. Az állapot azt jelzi, hogy létre lett hozva egy tároló.
2. A Azure Portal ellenőrizze, hogy a tároló létrejött-e. Válassza ki a tárfiókot. A Blob Service szakaszban válassza a Tárolók lehetőséget. Ellenőrizze, hogy megjelenik-e az új tároló. (Előfordulhat, hogy a Frissítés lehetőséget kell választania.)

2. lépés: Blob feltöltése a tárolóba

1. A helyi számítógépen hozzon létre és mentsen egy tesztfájlt, például test.txt.
2. A webalkalmazásban válassza a Fájlok kiválasztása és feltöltése lehetőséget.
3. Keresse meg a tesztfájlt, majd válassza a Megnyitás lehetőséget. Az állapot azt jelzi, hogy a fájlt feltöltötték, és lekérte a fájllistát.
4. A Azure Portal válassza ki a korábban létrehozott új tároló nevét. Ellenőrizze, hogy megjelenik-e a tesztfájl.

3. lépés: A blob törlése

1. A webalkalmazás Fájlok területén válassza ki a tesztfájlt.
2. Válassza a Kijelölt fájlok törlése lehetőséget. Az állapot azt jelzi, hogy a fájlt törölték, és hogy a tároló nem tartalmaz fájlokat.
3. A Azure Portal válassza a Frissítés lehetőséget. Ellenőrizze, hogy nem találhatók-e blobok.

4. lépés: A tároló törlése

1. A webalkalmazásban válassza a Tároló törlése lehetőséget. Az állapot azt jelzi, hogy a tárolót törölték.
2. A Azure Portal válassza ki a <fiók nevét> | A tárolók hivatkozása a portál paneljének bal felső sarkában található.
3. Válassza a Frissítés lehetőséget. Az új tároló eltűnik.
4. Zárja be a webalkalmazást.

A Storage Emulator használata

Ez a rövid útmutató létrehozott egy tárolót és egy blobot az Azure-felhőben. Az Azure Blob Storage npm-csomag használatával helyileg is létrehozhatja ezeket az erőforrásokat az Azure Storage emulátorban fejlesztési és tesztelési célokra.

Az erőforrások eltávolítása

1. Ha végzett ezzel a rövid útmutatóval, törölje a könyvtárat blob-quickstart-v12 .
2. Ha végzett az Azure Storage-erőforrás használatával, távolítsa el az erőforráscsoportot az alábbi módszerekkel:
   • A Storage-erőforrás eltávolítása az Azure CLI használatával
   • Az erőforrás eltávolításához használja a Azure Portal.

Következő lépések

Ebben a rövid útmutatóban megtanulta, hogyan tölthet fel, listázhat és törölhet blobokat JavaScript használatával. Azt is megtanulta, hogyan hozhat létre és törölhet blobtárolót.

Oktatóanyagok, minták, rövid útmutatók és egyéb dokumentációk:

Az Azure for JavaScript dokumentációja

• További információért tekintse meg a JavaScripthez készült Azure Blob Storage ügyfélkódtárat.
• A Blob Storage-mintaalkalmazások megtekintéséhez folytassa az Azure Blob Storage ügyfélkódtár v12 JavaScript-mintáival.