Upload en bild till en Azure Storage blob

Artikel
12/03/2021
11 minuter för att läsa

Använd en app på React klientsidan för att ladda upp en bildfil till en Azure Storage-blob med ett NPM-paket Azure Storage @azure/storage-blob.

TypeScript-programmeringsarbetet är klart åt dig. Den här självstudien fokuserar på att använda de lokala och fjärranslutna Azure-miljöerna inifrån Visual Studio Code med Azure-tillägg.

Programarkitektur och funktioner

Den här artikeln innehåller flera viktiga Azure-uppgifter för JavaScript-utvecklare:

Köra en React/TypeScript-app lokalt med Visual Studio Code
Skapa en Azure Storage Blob-resurs och konfigurera för filuppladdningar
- Konfigurera CORS
- Skapa SAS-token (signaturer för delad åtkomst)
Konfigurera kod för Azure SDK-klientbiblioteket för att använda SAS-token för att autentisera till tjänsten

Exempelappen React, som finns GitHub, består av följande element:

React på port 3000
Skript för Azure SDK-klientbibliotek för uppladdning Storage blobar

Enkel React som är ansluten Azure Storage blobar.

1. Konfigurera utvecklingsmiljön

Ett Azure-användarkonto med en aktiv prenumeration. Skapa ett utan kostnad.
Node.js LTS med NPMNode.js pakethanteraren installerad på den lokala datorn.
Visual Studio Code installerat på den lokala datorn.
Visual Studio Code-tillägg:
- Azure-resurs
- Azure Storage – används för att visa Storage resurs
- Azure Static Web Apps – används för att skapa och distribuera React till Azure

2. För- och klona exempelprogrammet

Öppna den GitHub exempel-URL:en i en webbläsare:

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

Välj Förk för att skapa en egen förk för det här exempelprojektet. Din egen GitHub är nödvändig för att distribuera det här exemplet till Azure som en statisk webbapp.
Välj knappen Kod och kopiera sedan klon-URL:en.
I en bash-terminal klonar du den förked lagringsplatsen och REPLACE-WITH-YOUR-ACCOUNT-NAME ersätter GitHub namnet på ditt konto:
```
git clone https://github.com/REPLACE-WITH-YOUR-ACCOUNT-NAME/js-e2e-browser-file-upload-storage-blob
```
Ändra till den nya katalogen och öppna Visual Studio Code.
```
cd js-e2e-browser-file-upload-storage-blob && code .
```

3. Installera beroenden och kör lokalt projekt

I Visual Studio Code öppnar du en integrerad bash-terminal, CtrlSkift, och kör följande kommando för att ` installera exemplets beroenden.
```
npm install
```
Kör webbappen genom att köra kommandot i samma terminalfönster.
```
npm start
```
Öppna en webbläsare och använd följande URL för att visa webbappen på den lokala datorn.
```
http://localhost:3000/
```
Om du ser den enkla webbappen i webbläsaren med texten som Storage har konfigurerats, har du lyckats med det här avsnittet i självstudien.
Stoppa koden med CtrlC i terminalen Visual Studio Code.

4. Skapa Storage resurs med Visual Studio tillägg

Gå till Azure Storage tillägget. Högerklicka på prenumerationen och välj Create Storage Account... sedan .

Följ anvisningarna med hjälp av följande tabell för att förstå hur du skapar Storage resurs.

Egenskap	Värde
Ange ett globalt unikt namn för den nya webbappen.	Ange ett värde som `fileuploaddemo` , för Storage resursnamn. Det här unika namnet är ditt resursnamn som används i nästa avsnitt. Använd endast tecken och siffror, upp till 24 tecken långt. Du behöver det här kontonamnet för senare användning.

När processen för att skapa appen är klar visas ett meddelande med information om den nya resursen.

5. Generera din SAS-token (signatur för delad åtkomst)

Generera SAS-token innan du konfigurerar CORS.

I Visual Studio Code för Storage högerklickar du på resursen och väljer Öppna i portalen. Då öppnas Azure Portal till din exakta Storage resurs.
I avsnittet Säkerhet + nätverk väljer du Signatur för delad åtkomst.

Konfigurera SAS-token med följande inställningar.

Egenskap	Värde
Tillåtna tjänster	Blob
Tillåtna resurstyper	Tjänst, container, objekt
Tillåtna behörigheter	Läsa, skriva, ta bort, lista, lägga till, skapa
Behörigheter för blobversionshantering	Markerad
Tillåt behörigheter för blobindex	Läsning/skrivning och filter ska vara markerat
Start- och slutdatum/tid	Acceptera startdatum/-tid och ange slutdatumet 24 timmar i framtiden. Din SAS-token är bara bra i 24 timmar.
Endast HTTPS	Markerat
Önskad routningsnivå	Basic
Signeringsnyckel	key1 valt

Konfigurera SAS-token som visas på bilden. Inställningarna beskrivs under bilden.

Välj Skapa SAS och anslutningssträng.
Kopiera OMEDELBART SAS-token. Du kommer inte att kunna visa den här token, så om du inte har kopierat den måste du generera en ny SAS-token.

6. Ange Storage i .env-filen

SAS-token används när frågor görs till din molnbaserade resurs.

Skapa ett filnamn .env i projektroten.
Lägg till två obligatoriska variabler med deras lagringsvärden:
```
REACT_APP_STORAGESASTOKEN=
REACT_APP_STORAGERESOURCENAME=
```
React skapar de statiska filerna med dessa variabler.
Om token börjar med ett frågetecken tar du bort ? . Kodfilen innehåller ? för dig så att du inte behöver den i token.

7. Konfigurera CORS för Azure Storage resurs

Konfigurera CORS för din resurs så att klientsidans kod React komma åt ditt lagringskonto.

När du fortfarande är i Azure-portalerna går Inställningar avsnittet och väljer Resursdelning (CORS).
Konfigurera Blob Service CORS enligt bilden. Inställningarna beskrivs under bilden.

Egenskap Värde

Tillåtna ursprung *

Tillåtna metoder Alla utom korrigering.

Tillåtna rubriker *

Exponerade rubriker *

Maximal ålder 86400
Välj Spara ovanför inställningarna för att spara dem till resursen. Koden kräver inte några ändringar för att fungera med de här CORS-inställningarna.

Egenskap	Värde
Tillåtna ursprung	`*`
Tillåtna metoder	Alla utom korrigering.
Tillåtna rubriker	`*`
Exponerade rubriker	`*`
Maximal ålder	86400

8. Kör projektet lokalt för att verifiera anslutningen till Storage konto

Ditt SAS-token och lagringskontonamn har angetts src/azure-storage-blob.ts i filen, så du är redo att köra programmet.

Om appen inte körs startar du den igen:
```
npm start
```
Öppna följande URL i en webbläsare:

http://localhost:3000
Välj en bild från mappen images som du vill ladda upp och välj sedan images
Klientkoden React i klientsidan anropar ./src/azure-storage-blob.ts för att autentisera till Azure och skapar sedan en Storage-container (om den inte redan finns) och laddar sedan upp filen till den containern.

9. Distribuera statisk webbapp till Azure

I Visual Studio Code väljer du Azure Explorer.
Om du ser ett popup-fönster där du uppmanas att genomföra ändringarna ska du inte göra detta. Exemplet bör vara redo att distribueras utan ändringar.

Om du vill återställa ändringarna går Visual Studio kod väljer du ikonen Källkodskontroll i aktivitetsfältet. Markera sedan varje ändrad fil i listan Ändringar och välj ikonen Ignorera ändringar.
Högerklicka på prenumerationsnamnet och välj sedan Skapa statisk webbapp (avancerat).

Följ anvisningarna för att ange följande information:

Prompt	Ange
Ange namnet på den nya statiska webbappen.	Skapa ett unikt namn för din resurs. Du kan till exempel lägga till namnet på lagringsplatsen före namnet, till exempel `upload-file-to-storage` .
Välj en resursgrupp för nya resurser.	Använd resursgruppen som du skapade för lagringsresursen.
Välj en SKU	Välj den kostnadsfria SKU:n för den här självstudien. Om du redan har en kostnadsfri statisk webbappresurs som används väljer du nästa prisnivå.
Välj byggförinställning för att konfigurera standardprojektstrukturen.	Välj React.
Välj platsen för programkoden	`/` – Detta anger att filen package.json finns i lagringsplatsens rot.
Välj platsen för din Azure Functions kod	Acceptera standardvärdet. Även om det här exemplet inte använder ett API kan du lägga till ett senare.
Ange sökvägen till dina byggutdata...	`build` Det här är sökvägen från din app till dina statiska (genererade) filer.
Välj en plats för nya resurser.	Välj en region nära dig.

När processen är klar visas ett popup-meddelande. Välj Visa/redigera arbetsflöde.

10. Lägg till Azure Storage hemligheter för att GitHub hemligheter

Gå tillbaka till exempelprojektets GitHub i en webbläsare för att lägga till de två hemligheterna och deras värden:
```
https://github.com/YOUR-GITHUB-ACCOUNT/js-e2e-browser-file-upload-storage-blob/settings/secrets/actions
```

11. Konfigurera en statisk webbapp för att ansluta till lagringsresursen

Redigera arbetsflödet GitHub hemligheter för att ansluta till Azure Storage.

I Visual Studio Code öppnar du YAML-arbetsflödesfilen och lägger till de två .github/workflows lagringsmiljövariablerna with efter avsnittet i 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}}

Detta hämtar hemligheterna till byggprocessen.

I Visual Studio Code väljer du Källkontroll, CtrlSkift G och sedan additionsikonen för att lägga till den ändrade *.yml-filen.
Ange en kommentar för ditt genomförande, till exempel Adding Storage secrets .
Skicka till din GitHub genom att välja ikonen Synkronisera ändringar i statusfältet.
I popup-fönstret för att bekräfta om du vill skicka och hämta från fjärrlagringsplatsen väljer du OK.

Om du får ett felmeddelande i det här steget kan du checka ut git-fjärrservern för att kontrollera att du har klonat din föring: .
Denna push utlöser en ny version och distribueras för din statiska webbapp.

12. Kontrollera att bygg- och distributionsjobbet har slutförts

Gå tillbaka till din GitHub i exempelprojektet i en webbläsare.
Välj Åtgärderoch välj sedan den Azure Static Web Apps CI/CD-åtgärden.
Välj Build and Deploy Job (Skapa och distribuera jobb) för att se hur processen slutförs.

13. Använd den Azure-distribuerade statiska webbappen

I Visual Studio Code högerklickar du på din statiska webbapp från Azure Explorer och väljer
I det nya webbläsarfönstret väljer du en fil och laddar upp filen.

Felsöka lokal anslutning till Storage konto

Om du har fått ett fel eller om filen inte laddas upp till containern kontrollerar du följande:

Återskapa din SAS-token och se till att din token skapas Storage på resursnivå och inte på containernivå. Kopiera den nya token till koden på rätt plats.
Kontrollera att tokensträngen som du kopierade till koden inte innehåller ? (frågetecknet) i början av strängen.
Kontrollera CORS-inställningen för Storage resurs.

Upload-knappfunktioner

src/App.tsxTypeScript-filen tillhandahålls som en del av appskapandet med create-react-app. Filen har ändrats för att tillhandahålla filvalsknappen, uppladdningsknappen och stödkoden för att tillhandahålla den funktionen.

Koden som ansluter till Azure Blob Storage är markerad. Anropet uploadFileToBlob till returnerar alla blobar (filer) i containern som en platt lista. Listan visas med DisplayImagesFromContainer funktionen .

// ./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 för att Azure Storage blob med Azure SDK-klientbiblioteket

Koden för att ladda upp filen Azure Storage är ramverksoberoende. När koden har skapats för en självstudie gjordes val för enkelhetens och förståelsen. Dessa alternativ förklaras. Du bör granska ditt eget projekt för avsiktlig användning, säkerhet och effektivitet.

Exemplet skapar och använder en offentligt tillgänglig container och filer. Om du vill skydda dina filer i ditt eget projekt har du många lager där du kan styra detta från att kräva övergripande autentisering till din resurs till mycket specifika behörigheter för varje blobobjekt.

Beroenden och variabler

TypeScript-filen azure-storage-blob.ts läser in beroendena och hämtar de nödvändiga variablerna av antingen miljövariabler eller hårdkodade strängar.

Variabel	Beskrivning
`sasToken`	SAS-token som skapas Azure Portal med en Azure Portal med `?` . Ta bort den innan du anger den i `sasToken` variabeln.
`container`	Namnet på containern i Blob Storage. Du kan tänka på detta som en motsvarighet till en mapp eller katalog för ett filsystem.
`storageAccountName`	Ditt resursnamn.

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

Skapa Storage klient och hantera steg

Funktionen uploadFileToBlob är filens huvudfunktion. Den skapar klientobjektet för Storage-tjänsten och skapar sedan klienten till containerobjektet, laddar upp filen och hämtar sedan en lista över alla blobar i containern.

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 till blob

Funktionen createBlobInContainer laddar upp filen till containern med hjälp av klassen createBlobInContainermetoden uploadData. Innehållstypen måste skickas med begäran om du tänker använda webbläsarfunktioner, vilket beror på filtypen, till exempel att visa en bild.

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

Hämta lista över blobar

Funktionen hämtar en lista över URL:er med hjälp av getBlobsInContainergetBlobsInContainermetoden listBlobsFlat, för blobarna i containern. URL:erna är konstruerade för att användas som för src en bildvisning i 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;
}

Rensa resurser

I Visual Studio Code använder du Azure Explorer för resursgrupper, högerklickar på resursgruppen och väljer sedan Ta bort.

Detta tar bort alla resurser i gruppen, inklusive dina Storage och statiska webbappresurser.

Nästa steg

Om du vill fortsätta med den här appen kan du lära dig hur du distribuerar appen till Azure för värdtjänster med något av följande alternativ:

Upload som en statisk webbapp
Upload till en webbappresurs med hjälp Visual Studio-kodtillägget för App Service
Upload en app till en virtuell Azure-dator
Dokumentation om Azure Blob Storage
@azure/storage-blob
- NPM-paket
- Referensdokumentation
Azure Static Web App