Hochladen eines Images in ein Azure Storage-Blob mit JavaScript

  • Artikel

Verwenden Sie eine Azure Static Web App (clientseitige React-App), um eine Imagedatei mithilfe eines Azure Storage @azure/storage-blob npm-Pakets und eines Azure Storage SAS-Tokens in ein Azure Storage-Blob hochzuladen.

Die TypeScript-Programmieraufgaben wurden für Sie erledigt. Dieses Tutorial konzentriert sich auf die erfolgreiche Verwendung der lokalen Umgebung und der Azure-Remoteumgebungen in Visual Studio Code mit Azure-Erweiterungen.

Anwendungsarchitektur und Funktionalität

Dieser Artikel enthält mehrere wichtige Azure-Aufgaben für JavaScript-Entwickler:

  • Lokales Ausführen einer React-App mit Visual Studio Code
  • Erstellen einer Azure Storage Blob-Ressource und Konfiguration für Dateiuploads
    • Konfigurieren von CORS
    • Erstellen eines SAS-Tokens (Shared Access Signatures)
  • Konfigurieren von Code für die Azure SDK-Clientbibliothek zur Verwendung von SAS-Token für die Authentifizierung beim Dienst
  • Bereitstellen in statischer Web-App mit GitHub Action

Das Beispiel React-App besteht aus den folgenden Elementen:

Screenshot: Webbrowser mit einfacher React App, die mit Azure Storage-Blobs verbunden ist

1. Einrichten der Entwicklungsumgebung

2. Forken und Klonen der Beispielanwendung

  1. Öffnen Sie diese GitHub-Beispiel-URL in einem Webbrowser:

    https://github.com/Azure-Samples/ts-e2e-browser-file-upload-storage-blob

  2. Wählen Sie Forken aus, um Ihren eigenen Fork dieses Beispielprojekts zu erstellen. Ein eigener GitHub-Fork ist erforderlich, um dieses Beispiel als statische Web-App in Azure bereitzustellen.

  3. Wählen Sie die Schaltfläche Code aus, und kopieren Sie anschließend die Klon-URL.

  4. Klonen Sie in einem Bash-Terminal Ihr geforktes Repository, und ersetzen Sie dabei REPLACE-WITH-YOUR-ACCOUNT-NAME durch den Namen Ihres GitHub-Kontos:

    git clone https://github.com/REPLACE-WITH-YOUR-ACCOUNT-NAME/ts-e2e-browser-file-upload-storage-blob

  5. Wechseln Sie in das neue Verzeichnis, und öffnen Sie Visual Studio Code.

    cd ts-e2e-browser-file-upload-storage-blob && code .

3. Installieren von Abhängigkeiten und Ausführen eines lokalen Projekts

  1. Öffnen Sie in Visual Studio Code ein integriertes Bash-Terminal (STRG + UMSCHALT + `), und führen Sie den folgenden Befehl aus, um die Abhängigkeiten des Beispiels zu installieren:

    npm install

  2. Führen Sie im selben Terminalfenster den Befehl aus, um die Web-App zu erstellen und auszuführen.

    npm start

  3. Öffnen Sie einen Webbrowser, und verwenden Sie die folgende URL, um die Web-App auf Ihrem lokalen Computer anzuzeigen.

    http://localhost:3000/

    Wenn die einfache Web-App in Ihrem Browser mit dem Text angezeigt wird, dass der Speicher nicht konfiguriert ist, ist dieser Abschnitt des Tutorials erfolgreich.

    Screenshot: Webbrowser mit einfacher Node.js App, die mit der MongoDB-Datenbank verbunden ist

  4. Beenden Sie den Code mit STRG + C im Visual Studio Code-Terminal.

4. Erstellen einer Storage-Ressource mit der Visual Studio-Erweiterung

  1. Navigieren Sie zur Azure Storage-Erweiterung. Klicken Sie mit der rechten Maustaste auf das Abonnement, und wählen Sie dann Create Storage Account... aus.

    Screenshot: Visual Studio Code unter Verwendung der Azure-Erweiterungen Navigieren Sie zur Azure Storage-Erweiterung. Klicken Sie mit der rechten Maustaste auf das Abonnement, und wählen Sie dann

  2. Befolgen Sie die Anweisungen anhand der folgenden Tabelle, um zu verstehen, wie die Storage-Ressource erstellt wird.

    Eigenschaft Wert
    Geben Sie einen global eindeutigen Namen für die neue Web-App ein. Geben Sie einen Wert wie fileuploadstor als Name der Storage-Ressource ein.

    Dieser eindeutige Name ist Ihr Ressourcenname, der im nächsten Abschnitt verwendet wird. Verwenden Sie nur Zeichen und Zahlen (maximal 24 Zeichen). Dieser Kontoname ist in einem späteren Schritt erforderlich.

  3. Nachdem der App-Erstellungsprozess beendet wurde, wird eine Benachrichtigung mit Informationen zur neuen Ressource angezeigt.

    Screenshot: Visual Studio Code-Benachrichtigungs-Popup Wenn der App-Erstellungsprozess abgeschlossen ist, wird eine Benachrichtigung mit Informationen zur neuen Ressource angezeigt.

5. Generieren des SAS-Tokens (Shared Access Signature)

Erstellen Sie ein SAS-Token für den Container. Ein SAS-Token ist ein Token mit zeitlicher Dauer und eingeschränkter Berechtigung zum Delegieren des Zugriffs auf einen Container oder Blob in Ihrem Azure Storage-Konto.

Wählen Sie aus den beiden verfügbaren Typen aus:

  • Benutzerdelegierungs-SAS: Empfohlen. Mit einem Azure AD-Konto signiert. Erfordert eine Einrichtung für die rollenbasierte Zugriffssteuerung.
  • Dienst-SAS: Mit dem Speicherkontoschlüssel signiert.

Sobald die SAS erstellt und an einen Client verteilt wurde, ist es genauso sicher, ob sie mit dem Kontoschlüssel oder mit einem Azure AD-Konto signiert ist. Die Benutzerdelegierungs-SAS hat den Vorteil, dass sie einfacher widerrufen werden kann.

Generieren Sie das vom Benutzer delegierte SAS-Token , bevor Sie CORS konfigurieren. Das vom Benutzer delegierte SAS-Token wird empfohlen:

  • So implementieren Sie den zugriff mit den geringsten Berechtigungen über Azure RBAC
  • So minimieren Sie den Zugriffszeitbereich auf 7 Tage oder weniger
  • So reduzieren Sie den Zugriff von Entwicklern und Devops auf den Ressourcenschlüssel
  • So reduzieren Sie die Belastung durch entleckte Schlüssel von der Schlüsselrotation bis zum Aufheben des SAS-Tokens

  1. Klicken Sie in der Visual Studio Code-Erweiterung für Storage mit der rechten Maustaste auf die Ressource, und wählen Sie dann Im Portal öffnen aus. Dadurch wird das Azure-Portal für Ihre Storage-Ressource geöffnet.

  2. Erstellen Sie einen Container mit dem Namen uploaded.

  3. Öffnen Sie die Cloud Shell im Portal.

    Screenshot: Azure-Portal Symbolleiste mit hervorgehobener Cloud Shell Schaltfläche

  4. Verwenden Sie den folgenden Befehl mit Ihren eigenen Werten.

    az storage account show --resource-group 'YOUR-RESOURCE-GROUP' --name 'YOUR-STORAGE-RESOURCE-NAME' --query id

    Dieser Befehl gibt eine Ressourcen-ID im richtigen Format zurück: /subscriptions/YOUR-SUBSCRIPTION/resourceGroups/YOUR-RESOURCE-GROUP/providers/Microsoft.Storage/storageAccounts/YOUR-STORAGE-RESOURCE-NAME.

  5. Kopieren Sie die Ausgabe, die Ressourcen-ID, und verwenden Sie sie im folgenden Befehl, um dem Speicherkonto die rollenbasierte Zugriffssteuerung hinzuzufügen.

    az role assignment create --assignee "YOUR-EMAIL" --role "Storage Blob Data Contributor" --scope "YOUR-RESOURCE-ID"

  6. Wählen Sie den Container aus, klicken Sie dann mit der rechten Maustaste auf die Zeile, und wählen Sie SAS generieren aus.

    Screenshot: Azure-Portal mit dem Kontextmenü des Containers mit hervorgehobener Option

  7. Konfigurieren Sie das SAS-Token für die Benutzerdelegierung des Containers mit den folgenden Einstellungen. Wenn keine Einstellung angegeben ist, ändern Sie die Einstellung nicht.

    Eigenschaft Wert
    Signaturmethode Benutzerdelegierungsschlüssel
    Berechtigungen Lesen, Erstellen, Schreiben, Auflisten
    Datum/Uhrzeit für Start und Ablauf Akzeptieren Sie das Startdatum/die Startzeit, und legen Sie den Ablauf auf 24 Stunden in der Zukunft fest. Ein vom Benutzer entferntes SAS-Token kann einen maximalen Ablauf von 7 Tagen nach der Startzeit haben.
    Nur HTTPS Ausgewählt

    Screenshot: Azure-Portal für Azure Storage zum Konfigurieren des vom Benutzer delegierten SAS-Tokens.

  8. Wählen Sie SAS und URL generieren aus.

  9. Kopieren Sie sofort das Blob-SAS-Token. Sie können dieses Token nicht auflisten. Wenn Sie es also nicht kopiert haben, müssen Sie ein neues SAS-Token neu generieren.

6. Festlegen von Storage-Werten in der ENV-Datei

Das SAS-Token wird verwendet, wenn Abfragen an die cloudbasierte Ressource gesendet werden.

  1. Erstellen Sie im Stammverzeichnis des Projekts eine Datei namens .env.

  2. Fügen Sie zwei erforderliche Variablen mit ihren Speicherwerten hinzu:

    REACT_APP_AZURE_STORAGE_SAS_TOKEN=
REACT_APP_AZURE_STORAGE_RESOURCE_NAME=

    React erstellt die statischen Dateien mit diesen Variablen.

  3. Wenn das Token mit einem Fragezeichen (?) beginnt, entfernen Sie es. Die Codedatei stellt ? für Sie bereit, sodass Sie das Fragezeichen nicht im Token benötigen.

7. Konfigurieren von CORS für die Azure Storage-Ressource

Konfigurieren Sie CORS für Ihre Ressource, damit der clientseitige React-Code auf Ihr Speicherkonto zugreifen kann.

  1. Wählen Sie im Azure-Portal im Abschnitt „Einstellungen“ die Option Resource sharing (CORS) (Ressourcenfreigabe (CORS)) aus.

  2. Konfigurieren Sie CORS für den Blob-Dienst wie in der Abbildung gezeigt. Die Einstellungen werden unter der Abbildung erläutert.

    Eigenschaft Wert
    Zulässige Ursprünge *
    Zulässige Methoden Alle außer Patch.
    Zulässige Header *
    Verfügbar gemachte Header *
    Maximales Alter 86.400

    Screenshot: Azure-Portal für die Speicherressource Konfigurieren Sie CORS wie im Image dargestellt. Die Einstellungen werden unter der Abbildung erläutert.

    Nachdem die Anwendung bereitgestellt wurde, kehren Sie zu diesem CORS-Formular zurück, um die URL für die statische Web-App hinzuzufügen.

  3. Wählen Sie Speichern über den Einstellungen aus, um die Einstellung in der Ressource zu speichern. Für den Code sind keine Änderungen erforderlich, um mit diesen CORS-Einstellungen arbeiten zu können.

8. Lokales Ausführen des Projekts, um die Verbindung mit dem Storage-Konto zu bestätigen

Ihr SAS-Token und der Speicherkontoname werden aus Umgebungsvariablen in die Anwendung abgerufen, sodass Sie bereit sind, die Anwendung auszuführen.

  1. Wird die App nicht ausgeführt, starten Sie sie erneut:

    npm start

  2. Öffnen Sie die folgende URL in einem Browser:

    http://localhost:3000

    Screenshot: Webbrowser mit der React Website, die mit Azure Storage-Blobs verbunden ist, sollte mit einer Schaltfläche für die Dateiauswahl und einer Schaltfläche zum Hochladen von Dateien angezeigt werden.

  3. Wählen Sie ein Bild aus dem Ordner aus, das images hochgeladen werden soll, und wählen Sie dann die Schaltfläche Hochladen! aus.

  4. Der React-Clientcode des Front-Ends ruft ./src/azure-storage-blob zur Authentifizierung bei Azure auf, erstellt dann einen Speichercontainer (falls noch nicht vorhanden) und lädt die Datei in diesen Container hoch.

9. Bereitstellen einer statischen Web-App in Azure

  1. Wählen Sie in Visual Studio Code Azure Explorer aus.

  2. Wenn ein Popupfenster angezeigt wird, in dem Sie aufgefordert werden, Ihre Änderungen zu committen, tun Sie dies nicht. Das Beispiel sollte ohne Änderungen bereitgestellt werden können.

    Wenn Sie die Änderungen zurücksetzen möchten, wählen Sie in Visual Studio Code auf der Aktivitätsleiste das Symbol Quellcodeverwaltung aus. Wählen Sie dann in der Liste Änderungen die einzelnen geänderten Dateien und anschließend das Symbol Änderungen verwerfen aus.

  3. Klicken Sie mit der rechten Maustaste auf den Abonnementnamen, und wählen Sie anschließend Create Static Web App (Advanced) (Statische Web-App erstellen (erweitert)) aus.

  4. Geben Sie gemäß der Eingabeaufforderungen die folgenden Informationen an:

    Prompt EINGABETASTE
    Enter the name for the new Static Web App. (Geben Sie den Namen für die neue statische Web-App ein.) Erstellen Sie einen eindeutigen Namen für Ihre Ressource. Dazu können Sie etwa dem Repositorynamen Ihren eigenen Namen voranstellen (Beispiel: upload-file-to-storage).
    „Select a resource group for new resources.“ (Wählen Sie eine Ressourcengruppe für neue Ressourcen aus.) Verwenden Sie die Ressourcengruppe, die Sie für Ihre Speicherressource erstellt haben.
    SKU auswählen Wählen Sie für dieses Tutorial die kostenlose SKU aus. Wenn Sie bereits über eine kostenlose statische Web-App-Ressource verfügen, wählen Sie den nächsten Tarif aus.
    „Choose build preset to configure default project structure.“ (Wählen Sie eine Buildvoreinstellung aus, um die Standardprojektstruktur zu konfigurieren.) Wählen Sie React aus.
    „Select the location of your application code“ (Wählen Sie den Speicherort Ihres Anwendungscodes aus.) /: Gibt an, dass sich die Datei „package.json“ im Stammverzeichnis des Repositorys befindet.
    Wählen Sie den Speicherort Ihres Azure Functions-Codes aus. Übernehmen Sie den Standardwert. In diesem Beispiel wird zwar keine API verwendet, Sie können aber später eine hinzufügen.
    „Enter the path of your build output...“ (Geben Sie den Pfad Ihrer Buildausgabe ein...) build

    Dies ist der Pfad von Ihrer App zu Ihren statischen (generierten) Dateien.
    „Select a location for new resources.“ (Wählen Sie einen Standort für neue Ressourcen aus.) Wählen Sie eine Region in Ihrer Nähe aus.

  5. Wenn der Prozess abgeschlossen ist, wird ein Benachrichtigungspopupfenster angezeigt. Wählen Sie View/Edit Workflow (Workflow anzeigen/bearbeiten) aus.

    Partieller Screenshot: Visual Studio Code-Benachrichtigungspopupfenster mit hervorgehobener Schaltfläche „View/Edit Workflow“ (Workflow anzeigen/bearbeiten)

10. Hinzufügen von Azure Storage-Geheimnissen zu GitHub-Geheimnissen

  1. Kehren Sie in einem Webbrowser zu Ihrem GitHub-Fork des Beispielprojekts zurück, um die beiden Geheimnisse und ihre Werte hinzuzufügen:

    https://github.com/YOUR-GITHUB-ACCOUNT/ts-e2e-browser-file-upload-storage-blob/settings/secrets/actions

    Screenshot eines Webbrowsers https://github.commit der Anzeige auf der Seite

11. Konfigurieren der statischen Web-App für die Verbindung mit der Speicherressource

Bearbeiten Sie den GitHub-Workflow und die Geheimnisse, um eine Verbindung mit Azure Storage herzustellen.

  1. Öffnen Sie in Visual Studio Code die YAML-Workflowdatei .github/workflows, und fügen Sie die beiden Speicherumgebungsvariablen nach dem Abschnitt with zu build_and_deploy_job hinzu.

    jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_123456 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env: 
          REACT_APP_AZURE_STORAGE_SAS_TOKEN: ${{secrets.REACT_APP_AZURE_STORAGE_SAS_TOKEN}}
          REACT_APP_AZURE_STORAGE_RESOURCE_NAME: ${{secrets.REACT_APP_AZURE_STORAGE_RESOURCE_NAME}}

    Dadurch werden die Geheimnisse in den Buildprozess gepullt.

  2. Wählen Sie in Visual Studio Code „Quellcodeverwaltung“ (STRG + UMSCHALT + G) und dann das Symbol zum Hinzufügen aus, um die geänderte YML-Datei hinzuzufügen.

  3. Geben Sie einen Kommentar für Ihren Commit ein, z. B. Adding Storage secrets.

  4. Pushen Sie in Ihren GitHub-Fork, indem Sie auf der Statusleiste das Symbol Änderungen synchronisieren auswählen.

    Partieller Screenshot: Statusleiste in Visual Studio Code

  5. Wählen Sie im Popupfenster, in dem Sie das Pushen und Pullen in Ihr bzw. aus Ihrem Remoterepository bestätigen müssen, die Option OK aus.

    Wenn bei diesem Schritt ein Fehler auftritt, überprüfen Sie Ihr Git-Remoterepository, um sicherzustellen, dass Sie Ihren Fork geklont haben: git remote -v.

  6. Dieser Push löst einen neuen Build und seine Bereitstellung für Ihre statische Web-App aus.

12. Überprüfen, ob der Build- und Bereitstellungsauftrag abgeschlossen ist

  1. Kehren Sie in einem Webbrowser zu Ihrem GitHub-Fork des Beispielprojekts zurück.

  2. Wählen Sie Aktionen und anschließen die Aktion Azure Static Web Apps CI/CD aus.

  3. Wählen Sie „Build and Deploy Job“ (Auftrag zum Erstellen und Bereitstellen) aus, um den Abschluss des Prozesses zu verfolgen.

    Screenshot: Webbrowser mit erfolgreicher GitHub-Aktion

13. Verwenden der von Azure bereitgestellten statischen Web-App

  1. Klicken Sie in Visual Studio Code in Azure Explorer mit der rechten Maustaste auf Ihre statische Web-App, und wählen Sie

    Partieller Screenshot: Auswählen von „Browse Site“ (Website durchsuchen) auf der statischen Azure-Website

  2. Wählen Sie im neuen Webbrowserfenster eine Datei aus, und laden Sie die Datei hoch.

Beheben von Problemen mit einer lokalen Verbindung mit einem Storage-Konto

Wenn Sie einen Fehler erhalten haben oder die Datei nicht in den Container hochgeladen wird, überprüfen Sie Folgendes:

  • Erstellen Sie Ihr SAS-Token neu. Stellen Sie dabei sicher, dass das Token auf der Speicherressourcenebene und nicht auf der Containerebene erstellt wird. Kopieren Sie das neue Token an der richtigen Stelle in den Code.
  • Stellen Sie sicher, das die in den Code kopierte Tokenzeichenfolge nicht mit einem Fragezeichen (?) beginnt.
  • Überprüfen Sie die CORS-Einstellung für Ihre Speicherressource.

Funktionalität der Schaltfläche „Hochladen“

Die TypeScript-Datei src/App.tsx wird als Teil der App-Erstellung mit create-reag-app bereitgestellt. Die Datei wurde geändert, um eine Schaltfläche für die Dateiauswahl und eine Schaltfläche für den Upload sowie den unterstützenden Code zur Bereitstellung dieser Funktionalität bereitzustellen.

Der Code, mit dem eine Verbindung mit dem Azure Blob Storage-Code hergestellt wird, ist hervorgehoben. Der Aufruf von uploadFileToBlob gibt alle Blobs (Dateien) im Container als unformatierte Liste zurück. Diese Liste wird mit der DisplayImagesFromContainer-Funktion angezeigt.

// ./src/App.tsx

import React, { useState, useEffect } from 'react';
import uploadFileToBlob, { isStorageConfigured, getBlobsInContainer } from './azure-storage-blob';
import DisplayImagesFromContainer from './ContainerImages';
const storageConfigured = isStorageConfigured();

const App = (): JSX.Element => {
  // all blobs in container
  const [blobList, setBlobList] = useState<string[]>([]);

  // current file to upload into container
  const [fileSelected, setFileSelected] = useState<File | null>();
  const [fileUploaded, setFileUploaded] = useState<string>('');

  // UI/form management
  const [uploading, setUploading] = useState<boolean>(false);
  const [inputKey, setInputKey] = useState(Math.random().toString(36));

  // *** GET FILES IN CONTAINER ***
  useEffect(() => {
    getBlobsInContainer().then((list:any) =>{
      // prepare UI for results
      setBlobList(list);
    })
  }, [fileUploaded]);

  const onFileChange = (event: any) => {
    // capture file into state
    setFileSelected(event.target.files[0]);
  };

  const onFileUpload = async () => {

    if(fileSelected && fileSelected?.name){
    // prepare UI
    setUploading(true);

    // *** UPLOAD TO AZURE STORAGE ***
    await uploadFileToBlob(fileSelected);

    // reset state/form
    setFileSelected(null);
    setFileUploaded(fileSelected.name);
    setUploading(false);
    setInputKey(Math.random().toString(36));

    }

  };

  // display form
  const DisplayForm = () => (
    <div>
      <input type="file" onChange={onFileChange} key={inputKey || ''} />
      <button type="submit" onClick={onFileUpload}>
        Upload!
          </button>
    </div>
  )

  return (
    <div>
      <h1>Upload file to Azure Blob Storage</h1>
      {storageConfigured && !uploading && DisplayForm()}
      {storageConfigured && uploading && <div>Uploading</div>}
      <hr />
      {storageConfigured && blobList.length > 0 && <DisplayImagesFromContainer blobList={blobList}/>}
      {!storageConfigured && <div>Storage is not configured.</div>}
    </div>
  );
};

export default App;

Hochladen einer Datei in Azure Storage-Blob mit der Azure SDK-Clientbibliothek

Der Code zum Hochladen der Datei in Azure Storage ist frameworkagnostisch. Da der Code für ein Tutorial erstellt wird, wird auf Einfachheit und Verständlichkeit geachtet. Diese Entscheidungen werden erläutert. Sie sollten Ihr eigenes Projekt auf beabsichtigte Nutzung, Sicherheit und Effizienz überprüfen.

Das Beispiel erstellt und verwendet einen öffentlich zugänglichen Container und Dateien. Wenn Sie Dateien in Ihrem eigenen Projekt sichern möchten, stehen Ihnen viele Ebenen zur Verfügung, auf denen Sie dies steuern können, vom Erfordernis einer allgemeinen Authentifizierung für Ihre Ressource bis hin zu sehr spezifischen Berechtigungen für jedes Blobobjekt.

Abhängigkeiten und Variablen

Die Datei azure-storage-blob.ts lädt die Abhängigkeiten und ruft die erforderlichen Variablen entweder durch Umgebungsvariablen oder hartcodierte Zeichenfolgen ab.

Variable BESCHREIBUNG
sasToken Das SAS-Token, das mit dem Azure-Portal erstellt wurde. Entfernen Sie den vorangestellten ? Vorangestellten, bevor Sie ihn in Ihrer sasToken Variablen festlegen.
container Der Name des Containers im Speicherkonto. Sie können sich diesen als äquivalent zu einem Ordner oder Verzeichnis für ein Dateisystem vorstellen.
storageAccountName Der Name Ihrer Ressource. 
// THIS IS SAMPLE CODE ONLY - NOT MEANT FOR PRODUCTION USE
import { BlobServiceClient, ContainerClient } from "@azure/storage-blob";

const containerName = `uploaded`;
const sasToken = process.env.REACT_APP_AZURE_STORAGE_SAS_TOKEN;
const storageAccountName = process.env.REACT_APP_AZURE_STORAGE_RESOURCE_NAME;

Erstellen des Storage-Clients und Verwaltungsschritte

Der Client wird mit einer URL erstellt, die sowohl den Namen der Speicherressource als auch das SAS-Token enthält. Das SAS-Token befindet sich in der Abfragezeichenfolge, die mit dem Fragezeichen ?gekennzeichnet ist. Wenn Sie Ihr SAS-Token zu Ihrer Umgebungsvariablen hinzufügen, fügen Sie t_ das Fragezeichen ein, da es bereits in der URL-Zeichenfolge enthalten ist.

const uploadUrl = `https://${storageAccountName}.blob.core.windows.net/?${sasToken}`;
console.log(uploadUrl);

// get BlobService = notice `?` is pulled out of sasToken - if created in Azure portal
const blobService = new BlobServiceClient(uploadUrl);

// get Container - full public read access
const containerClient: ContainerClient =
  blobService.getContainerClient(containerName);

Hochladen einer Datei in blob storage

Die uploadFileToBlob-Funktion ist die Hauptfunktion der Datei. Sie erstellt das Clientobjekt für den Storage-Dienst, erstellt dann den Client für das Containerobjekt, lädt die Datei hoch und ruft dann eine Liste aller Blobs im Container ab.

const uploadFileToBlob = async (file: File | null): Promise<void> => {
  if (!file) return;

  // upload file
  await createBlobInContainer(file);
};

Erstellen eines Blobs im Container

Die Funktion createBlobInContainer lädt die Datei mithilfe der BlockBlobClient-Klasse und der uploadData-Methode in den Container hoch. Der Inhaltstyp muss mit der Anforderung gesendet werden, wenn Sie beabsichtigen, Browserfunktionen zu verwenden, die vom Dateityp abhängen, z. B. das Anzeigen eines Bilds.

const createBlobInContainer = async (file: File) => {
  // create blobClient for container
  const blobClient = containerClient.getBlockBlobClient(file.name);

  // set mimetype as determined from browser with file upload control
  const options = { blobHTTPHeaders: { blobContentType: file.type } };

  // upload file
  await blobClient.uploadData(file, options);
};

Abrufen einer Liste von Blobs

Die Funktion getBlobsInContainer ruft mithilfe der ContainerClient-Klasse und der listBlobsFlat-Methode eine Liste von URLs für die Blobs im Container ab. Die URLs werden erstellt, um als src einer Bildanzeige in HTML verwendet zu werden: <img src={item} alt={item} height="200" />.

// return list of blobs in container to display
export const getBlobsInContainer = async () => {
  const returnedBlobUrls = [];

  // get list of blobs in container
  // eslint-disable-next-line
  for await (const blob of containerClient.listBlobsFlat()) {
    console.log(`${blob.name}`);

    const blobItem = {
      url: `https://${storageAccountName}.blob.core.windows.net/${containerName}/${blob.name}?${sasToken}`,
      name: blob.name
    }

    // if image is public, just construct URL
    returnedBlobUrls.push(blobItem);
  }

  return returnedBlobUrls;
};

Bereinigen von Ressourcen

Verwenden Sie in Visual Studio Code den Azure-Explorer für Ressourcengruppen, klicken Sie mit der rechten Maustaste auf Ihre Ressourcengruppe, und wählen Sie dann Löschen aus.

Dadurch werden alle Ressourcen in der Gruppe gelöscht, einschließlich der Storage- und statischen Web-App-Ressourcen.

Beispielcode

Nächste Schritte

Wenn Sie mit dieser App fortfahren möchten, informieren Sie sich darüber, wie Sie die App zum Hosten mit einer der folgenden Optionen in Azure bereitstellen: