Upload afbeelding naar een Azure Storage blob

Artikel
12/03/2021
12 minuten om te lezen

Gebruik een client-React-app om een afbeeldingsbestand te uploaden naar een Azure Storage-blob met behulp van een Azure Storage @azure/storage-blob npm-pakket.

Het TypeScript-programmeerwerk wordt voor u uitgevoerd. Deze zelfstudie is gericht op het gebruik van de lokale en externe Azure-omgevingen vanuit Visual Studio Code met Azure-extensies.

Toepassingsarchitectuur en -functionaliteit

Dit artikel bevat enkele van de belangrijkste Azure-taken voor JavaScript-ontwikkelaars:

Een React/TypeScript-app lokaal uitvoeren met Visual Studio Code
Een blob Azure Storage maken en configureren voor bestanduploads
- CORS configureren
- Sas-token (Shared Access Signatures) maken
Code configureren voor de Azure SDK-clientbibliotheek om een SAS-token te gebruiken voor verificatie bij de service

De voorbeeld-React-app, die beschikbaar is GitHub, bestaat uit de volgende elementen:

React-app gehost op poort 3000
Azure SDK-clientbibliotheekscript om te uploaden naar Storage blobs

Eenvoudige React-app die is verbonden met Azure Storage blobs.

1. Ontwikkelomgeving instellen

Een Azure-gebruikersaccount met een actief abonnement. Maak er gratis een.
Node.js LTS met NPM, wordt Node.js pakketbeheer geïnstalleerd op uw lokale computer.
Visual Studio Code geïnstalleerd op uw lokale computer.
Visual Studio Code-extensies:
- Azure-resource
- Azure Storage: wordt gebruikt om de resource Storage weergeven
- Azure Static Web Apps: wordt gebruikt voor het maken en implementeren van de React-app in Azure

2. De voorbeeldtoepassing vervorken en klonen

Open deze GitHub voorbeeld-URL in een webbrowser:

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

Selecteer Fork om uw eigen fork van dit voorbeeldproject te maken. U hebt GitHub fork nodig om dit voorbeeld in Azure te implementeren als een statische web-app.
Selecteer de knop Code en kopieer vervolgens de Kloon-URL.
Kloon in een bash-terminal uw gevorkte opslagplaats, en vervang door REPLACE-WITH-YOUR-ACCOUNT-NAME de naam van GitHub account:
```
git clone https://github.com/REPLACE-WITH-YOUR-ACCOUNT-NAME/js-e2e-browser-file-upload-storage-blob
```

Wijzig in de nieuwe map en open Visual Studio Code.

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

3. Afhankelijkheden installeren en lokaal project uitvoeren

Open in Visual Studio Code een geïntegreerde bash-terminal, CtrlShift en voer de volgende opdracht uit om de afhankelijkheden van het voorbeeld ` te installeren.
```
npm install
```
Voer in hetzelfde terminalvenster de opdracht uit om de web-app uit te voeren.
```
npm start
```
Open een webbrowser en gebruik de volgende URL om de web-app op uw lokale computer weer te geven.
```
http://localhost:3000/
```
Als u de eenvoudige web-app in uw browser ziet met de tekst dat de Storage niet is geconfigureerd, bent u geslaagd met deze sectie van de zelfstudie.
Stop de code met CtrlC in de terminal Visual Studio Code.

4. Een Storage maken met Visual Studio extensie

Navigeer naar de Azure Storage extensie. Klik met de rechtermuisknop op het abonnement en selecteer Create Storage Account... .

Volg de aanwijzingen in de volgende tabel om te begrijpen hoe u uw Storage maken.

Eigenschap	Waarde
Voer een wereldwijd unieke naam in voor de nieuwe web-app.	Voer een waarde in, zoals `fileuploaddemo` , voor uw Storage resourcenaam. Deze unieke naam is de resourcenaam die in de volgende sectie wordt gebruikt. Gebruik alleen tekens en cijfers, maximaal 24 tekens lang. U hebt deze accountnaam later nodig.

Wanneer het proces voor het maken van de app is voltooid, wordt er een melding weergegeven met informatie over de nieuwe resource.

5. Uw SAS-token (Shared Access Signature) genereren

Genereer het SAS-token voordat u CORS configureert.

Klik in Visual Studio Code-extensie voor Storage met de rechtermuisknop op de resource en selecteer Openen in portal. Hiermee opent u de Azure Portal uw exacte Storage resource.
Selecteer in de sectie Beveiliging en netwerken de optie Shared Access Signature.

Configureer het SAS-token met de volgende instellingen.

Eigenschap	Waarde
Toegestane services	Blob
Toegestane brontypen	Service, Container, Object
Toegestane machtigingen	Lezen, schrijven, verwijderen, lijst, toevoegen, maken
Machtigingen voor blobversies	Ingeschakeld
Machtigingen voor blob-index toestaan	Lezen/schrijven en filteren moet zijn ingeschakeld
Begin- en vervaldatum/tijd	Accepteer de begindatum/-tijd en stel de einddatum en -tijd 24 uur in de toekomst in. Uw SAS-token is slechts 24 uur goed.
Alleen HTTPS	Geselecteerd
Voorkeursrouteringslaag	Basic
Ondertekeningssleutel	key1 geselecteerd

Configureer het SAS-token zoals wordt weer geven in de afbeelding. De instellingen worden beschreven onder de afbeelding.

Klik op SAS en verbindingsreeks genereren.
Kopieer onmiddellijk het SAS-token. U kunt dit token niet in een lijst zetten, dus als u het niet hebt gekopieerd, moet u een nieuw SAS-token genereren.

6. De Storage instellen in het .env-bestand

Het SAS-token wordt gebruikt wanneer er query's worden gedaan naar uw cloudresource.

Maak een bestandsnaam .env in de hoofdmap van het project.
Voeg twee vereiste variabelen toe met hun opslagwaarden:
```
REACT_APP_STORAGESASTOKEN=
REACT_APP_STORAGERESOURCENAME=
```
React bouwt de statische bestanden met deze variabelen.
Als het token begint met een vraagteken, verwijdert u de ? . Het codebestand biedt ? de voor u, zodat u het niet nodig hebt in het token.

7. CORS configureren voor Azure Storage resource

Configureer CORS voor uw resource zodat de code aan de clientzijde React toegang heeft tot uw opslagaccount.

Terwijl u zich nog steeds in De Azure-portals Instellingen selecteert u Resource sharing (CORS).
Configureer de Blob service CORS zoals wordt weer geven in de afbeelding. De instellingen worden beschreven onder de afbeelding.

Eigenschap Waarde

Toegestane oorsprongen *

Toegestane methoden Alle behalve patch.

Toegestane headers *

Weergegeven headers *

Maximale leeftijd 86400
Selecteer Opslaan boven de instellingen om ze op te slaan in de resource. Voor de code zijn geen wijzigingen vereist om met deze CORS-instellingen te werken.

Eigenschap	Waarde
Toegestane oorsprongen	`*`
Toegestane methoden	Alle behalve patch.
Toegestane headers	`*`
Weergegeven headers	`*`
Maximale leeftijd	86400

8. Voer het project lokaal uit om de verbinding met het Storage controleren

Uw SAS-token en de naam van het opslagaccount worden in het bestand src/azure-storage-blob.ts ingesteld, zodat u klaar bent om de toepassing uit te voeren.

Als de app niet wordt uitgevoerd, start u deze opnieuw:
```
npm start
```
Open de volgende URL in een browser:

http://localhost:3000
Selecteer een afbeelding in de images map die u wilt uploaden en selecteer vervolgens de knop images .
De React front-endclientcode roept de ./src/azure-storage-blob.ts aan voor verificatie bij Azure en maakt vervolgens een Storage-container (als deze nog niet bestaat) en uploadt het bestand vervolgens naar die container.

9. Een statische web-app implementeren in Azure

Selecteer Visual Studio Azure Explorer in Visual Studio Code.
Als u een pop-upvenster ziet waarin u wordt gevraagd uw wijzigingen door te voeren, moet u dit niet doen. Het voorbeeld moet zonder wijzigingen kunnen worden geïmplementeerd.

Als u de wijzigingen wilt terugdraaien, selecteert u in Visual Studio Code het pictogram Broncodebeheer in de activiteitenbalk. Selecteer vervolgens elk gewijzigd bestand in de lijst Wijzigingen en selecteer het pictogram Wijzigingen verwijderen.
Klik met de rechtermuisknop op de naam van het abonnement en selecteer vervolgens Statische web-app maken (geavanceerd).

Volg de aanwijzingen om de volgende informatie op te geven:

Prompt	Enter
Voer de naam in voor de nieuwe statische web-app.	Maak een unieke naam voor uw resource. U kunt bijvoorbeeld uw naam toevoegen aan de naam van de opslagplaats, zoals `upload-file-to-storage` .
Selecteer een resourcegroep voor nieuwe resources.	Gebruik de resourcegroep die u hebt gemaakt voor uw opslagresource.
Een SKU selecteren	Selecteer de gratis SKU voor deze zelfstudie. Als u al een gratis statische web-app-resource hebt gebruikt, selecteert u de volgende prijscategorie.
Kies build-voorinstelling om de standaardprojectstructuur te configureren.	Selecteer React.
Selecteer de locatie van uw toepassingscode	`/` -Dit geeft aan dat het bestand package.json zich in de hoofdmap van de opslagplaats.
Selecteer de locatie van uw Azure Functions code	Accepteer de standaardwaarde. Hoewel in dit voorbeeld geen API wordt gebruikt, kunt u er later een toevoegen.
Voer het pad van de build-uitvoer in...	`build` Dit is het pad van uw app naar uw statische (gegenereerde) bestanden.
Selecteer een locatie voor nieuwe resources.	Selecteer een regio bij u in de buurt.

Wanneer het proces is voltooid, wordt er een pop-upmelding weergegeven. Selecteer Werkstroom weergeven/bewerken.

10. Geheime Azure Storage toevoegen aan GitHub geheimen

Ga in een webbrowser terug naar uw GitHub fork van het voorbeeldproject om de twee geheimen en hun waarden toe te voegen:
```
https://github.com/YOUR-GITHUB-ACCOUNT/js-e2e-browser-file-upload-storage-blob/settings/secrets/actions
```

11. Statische web-app configureren om verbinding te maken met opslagresource

Bewerk de GitHub en geheimen om verbinding te maken met Azure Storage.

Open Visual Studio Code het YAML-werkstroombestand en voeg de twee opslagomgevingsvariabelen na de sectie toe .github/workflowswith aan de build_and_deploy_job .

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: # Add environment variables here
            REACT_APP_STORAGESASTOKEN: ${{secrets.REACT_APP_STORAGESASTOKEN}}
            REACT_APP_STORAGERESOURCENAME: ${{secrets.REACT_APP_STORAGERESOURCENAME}}

Hiermee haalt u de geheimen op voor het buildproces.

Selecteer Visual Studio Code broncodebeheer, CtrlShift G en selecteer vervolgens het opvoegpictogram om het gewijzigde *.yml-bestand toe te voegen.
Voer een opmerking in voor uw door te voeren, zoals Adding Storage secrets .
Push naar uw GitHub fork door het pictogram Wijzigingen synchroniseren te selecteren op de statusbalk.
Selecteer OK in het pop-upvenster om te bevestigen of u wilt pushen en pullen vanuit uw externe opslagplaats.

Als er tijdens deze stap een foutmelding wordt weergegeven, bekijkt u uw externe Git-account om er zeker van te zijn dat u de fork hebt gekloond: .
Deze push activeert een nieuwe build en implementeert deze voor uw statische web-app.

12. Controleren of de build- en implementatie-taak is voltooid

Ga in een webbrowser terug naar uw GitHub fork van het voorbeeldproject.
Selecteer Actiesen selecteer vervolgens de Azure Static Web Apps CI/CD-actie.
Selecteer de taak Bouwen en implementeren om het proces te bekijken.

13. De door Azure geïmplementeerde statische web-app gebruiken

Klik Visual Studio Code met de rechtermuisknop op uw statische web-app in Azure Explorer en selecteer
Kies in het nieuwe browservenster een bestand en upload het bestand.

Problemen met lokale verbinding met Storage account oplossen

Als u een foutmelding hebt ontvangen of als uw bestand niet naar de container wordt geüpload, controleert u het volgende:

Maak uw SAS-token opnieuw en zorg ervoor dat uw token wordt gemaakt op Storage resourceniveau en niet op containerniveau. Kopieer het nieuwe token in de code op de juiste locatie.
Controleer of de tokentekenreeks die u naar de code hebt gekopieerd, niet het (vraagteken) aan het ? begin van de tekenreeks bevat.
Controleer uw CORS-instelling voor uw Storage resource.

Upload knopfunctionaliteit

Het src/App.tsx TypeScript-bestand wordt geleverd als onderdeel van het maken van die app met create-react-app. Het bestand is gewijzigd om de knop voor het selecteren van bestanden, de uploadknop en de ondersteunende code op te geven om die functionaliteit te bieden.

De code die verbinding maakt met de Azure Blob Storage code is gemarkeerd. De aanroep uploadFileToBlob van retourneert alle blobs (bestanden) in de container als een platte lijst. Deze lijst wordt weergegeven met de DisplayImagesFromContainer functie .

// ./src/App.tsx

import React, { useState } from 'react';
import Path from 'path';
import uploadFileToBlob, { isStorageConfigured } from './azure-storage-blob';

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

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

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

  const onFileUpload = async () => {
    // prepare UI
    setUploading(true);

    // *** UPLOAD TO AZURE STORAGE ***
    const blobsInContainer: string[] = await uploadFileToBlob(fileSelected);

    // prepare UI for results
    setBlobList(blobsInContainer);

    // reset state/form
    setFileSelected(null);
    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>
  )

  // display file name and image
  const DisplayImagesFromContainer = () => (
    <div>
      <h2>Container items</h2>
      <ul>
        {blobList.map((item) => {
          return (
            <li key={item}>
              <div>
                {Path.basename(item)}
                <br />
                <img src={item} alt={item} height="200" />
              </div>
            </li>
          );
        })}
      </ul>
    </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()}
      {!storageConfigured && <div>Storage is not configured.</div>}
    </div>
  );
};

export default App;

Upload bestand toevoegen Azure Storage blob met Azure SDK-clientbibliotheek

De code voor het uploaden van het bestand Azure Storage is framework-agnostisch. Omdat de code is gebouwd voor een zelfstudie, zijn er keuzes gemaakt voor eenvoud en begrip. Deze keuzes worden uitgelegd; U moet uw eigen project controleren op opzettelijk gebruik, beveiliging en efficiëntie.

In het voorbeeld worden een openbaar toegankelijke container en bestanden gemaakt en gebruikt. Als u uw bestanden in uw eigen project wilt beveiligen, hebt u veel lagen waar u dat kunt beheren, van het vereisen van algemene verificatie voor uw resource tot zeer specifieke machtigingen voor elk blobobject.

Afhankelijkheden en variabelen

Het TypeScript-bestand azure-storage-blob.ts laadt de afhankelijkheden en haalt de vereiste variabelen op door omgevingsvariabelen of in code gecodeerde tekenreeksen.

Variabele	Beschrijving
`sasToken`	Het SAS-token dat is gemaakt met Azure Portal wordt voorbereid met een `?` . Verwijder deze voordat u deze in uw variabele `sasToken` instelt.
`container`	De naam van de container in Blob Storage. U kunt dit zien als een equivalent van een map of map voor een bestandssysteem.
`storageAccountName`	Uw resourcenaam.

// THIS IS SAMPLE CODE ONLY - NOT MEANT FOR PRODUCTION USE
import { BlobServiceClient, ContainerClient} from '@azure/storage-blob';

const containerName = `tutorial-container`;
const sasToken = process.env.REACT_APP_STORAGESASTOKEN;
const storageAccountName = process.env.REACT_APP_STORAGERESOURCENAME;

Een Storage client maken en stappen beheren

De uploadFileToBlob functie is de hoofdfunctie van het bestand. Het clientobject voor de Storage-service wordt gemaakt, vervolgens wordt de client naar het containerobject gemaakt, het bestand geüpload en vervolgens een lijst met alle blobs in de container opgeslagen.

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

  // get BlobService = notice `?` is pulled out of sasToken - if created in Azure portal
  const blobService = new BlobServiceClient(
    `https://${storageAccountName}.blob.core.windows.net/?${sasToken}`
  );

  // get Container - full public read access
  const containerClient: ContainerClient = blobService.getContainerClient(containerName);
  await containerClient.createIfNotExists({
    access: 'container',
  });

  // upload file
  await createBlobInContainer(containerClient, file);

  // get list of blobs in container
  return getBlobsInContainer(containerClient);
};

Upload naar blob

Met createBlobInContainer de functie wordt het bestand geüpload naar de container, met behulp van de klasse createBlobInContainerde methode uploadData. Het inhoudstype moet worden verzonden met de aanvraag als u van plan bent browserfunctionaliteit te gebruiken, afhankelijk van het bestandstype, zoals het weergeven van een afbeelding.

const createBlobInContainer = async (containerClient: ContainerClient, 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);
}

Lijst met blobs op halen

De functie haalt een lijst met URL's op met behulp van de getBlobsInContainergetBlobsInContainerde methode listBlobsFlat, voor de blobs in de container. De URL's worden samengesteld om te worden gebruikt als de src van een afbeeldingsweergave in HTML: <img src={item} alt={item} height="200" /> .

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

  // get list of blobs in container
  // eslint-disable-next-line
  for await (const blob of containerClient.listBlobsFlat()) {
    // if image is public, just construct URL
    returnedBlobUrls.push(
      `https://${storageAccountName}.blob.core.windows.net/${containerName}/${blob.name}`
    );
  }

  return returnedBlobUrls;
}

Resources opschonen

Gebruik Visual Studio Azure Explorer voor resourcegroepen in uw code, klik met de rechtermuisknop op de resourcegroep en selecteer Vervolgens Verwijderen.

Hiermee verwijdert u alle resources in de groep, inclusief uw Storage en statische web-app-resources.

Volgende stappen

Als u wilt doorgaan met deze app, leert u hoe u de app implementeert in Azure voor hosting met een van de volgende opties:

Upload als een statische web-app
Upload naar een web-app-resource met behulp van Visual Studio code-extensie voor de App Service
Upload app naar een Azure-VM verplaatsen
Documentatie voor Azure Blob Storage
@azure/storage-blob
- NPM-pakket
- Referentiedocumentatie
Azure Static Web-app