Udostępnij za pośrednictwem

Samouczek: przekazywanie obrazu do obiektu blob usługi Azure Storage przy użyciu języka JavaScript

W tym samouczku użyjesz statycznej aplikacji webowej do przesyłania plików bezpośrednio do obiektu blob Azure Storage przy użyciu pakietu @azure/storage-blob. API generuje token SAS zgodnie ze wzorcem Valet Key , który umożliwia bezpieczne delegowanie ograniczonego dostępu bez ujawniania pełnych poświadczeń.

Ostrożność

W tym samouczku pokazano, jak hostować aplikację funkcji w Planie Zużycia. Jeśli planujesz zabezpieczyć połączenia przy użyciu identyfikatora Entra firmy Microsoft z tożsamościami zarządzanymi, należy rozważyć hostowanie aplikacji w planie Flex Consumption. Warstwa Flex Consumption optymalizuje zabezpieczenia, obsługując korzystanie z tożsamości zarządzanych i integracji sieci wirtualnej.

Warunki wstępne

Architektura aplikacji

Ta architektura aplikacji obejmuje dwa zasoby platformy Azure:

  • Usługa Azure Static Web Apps hostuje zarówno klienta statycznego, jak i połączonego interfejsu API usługi Azure Functions, a usługa automatycznie zarządza zasobem interfejsu API.
  • Azure Storage dla usługi Blob Storage.

Diagram przedstawiający sposób interakcji klienta z komputera w celu bezpośredniego przekazania pliku do usługi Azure Storage przy użyciu witryny internetowej.

Krok Opis
1 Klient łączy się ze statycznie wygenerowaną witryną internetową. Witryna internetowa jest hostowana w usłudze Azure Static Web Apps.
2 Klient korzysta z tej witryny internetowej, aby wybrać plik do przekazania. W tym samouczku framework front-endowy to Vite React, a przesłany plik to plik graficzny.
3 Witryna internetowa wywołuje interfejs API Azure Functionssas, aby uzyskać token SAS na podstawie dokładnej nazwy pliku do przesłania. Interfejs API bezserwerowy używa zestawu SDK usługi Azure Blob Storage do utworzenia tokenu SAS. Interfejs API zwraca pełny adres URL do przesłania pliku, który zawiera token SAS jako ciąg zapytania.
https://YOUR-STORAGE-NAME.blob.core.windows.net/YOUR-CONTAINER/YOUR-FILE-NAME?YOUR-SAS-TOKEN
4 Strona internetowa front-endowa używa adresu URL tokenu SAS do przesłania pliku bezpośrednio do usługi Azure Blob Storage.

Środowiska lokalne i budowania

W tym samouczku używa się następujących środowisk:

  • Programowanie lokalne za pomocą usług GitHub Codespaces lub Visual Studio Code.
  • Kompilowanie i wdrażanie za pomocą funkcji GitHub Actions.

Utwórz fork przykładowego repozytorium aplikacji w usłudze GitHub

W tym samouczku akcje GitHub wykorzystuje się do wdrożenia przykładowej aplikacji na platformę Azure. Do ukończenia tego wdrożenia potrzebne jest konto GitHub i fork przykładowego repozytorium aplikacji.

  1. W przeglądarce internetowej użyj następującego linku, aby rozpocząć forkowanie (rozwidlenie) dla własnego konta przykładowego repozytorium: Azure-Samples/azure-typescript-e2e-apps.
  2. Wykonaj kroki, aby rozwidlić przykład na podstawie tylko głównej gałęzi .

Konfigurowanie środowiska deweloperskiego

Środowisko kontenera deweloperskiego jest dostępne ze wszystkimi zależnościami wymaganymi do wykonania każdego ćwiczenia w tym projekcie. Kontener deweloperski można uruchomić w usłudze GitHub Codespaces lub lokalnie przy użyciu programu Visual Studio Code.

GitHub Codespaces uruchamia kontener deweloperski, zarządzany przez GitHub, z użyciem Visual Studio Code for the Web jako interfejsu użytkownika. W przypadku najprostszego środowiska programistycznego użyj usługi GitHub Codespaces, aby mieć wstępnie zainstalowane odpowiednie narzędzia deweloperskie i zależności, aby ukończyć ten moduł szkoleniowy.

Ważny

Wszystkie konta usługi GitHub mogą korzystać z usługi Codespaces przez maksymalnie 60 godzin bezpłatnych każdego miesiąca z 2 podstawowymi wystąpieniami. Aby uzyskać więcej informacji, zobacz GitHub Codespaces monthly included storage and core hours (Miesięczne miejsca do magazynowania i godzin rdzeni usługi GitHub Codespaces).

  1. W przeglądarce internetowej, na swoim forku przykładowego repozytorium na GitHubie, uruchom proces tworzenia nowej przestrzeni GitHub Codespace w gałęzi main swojego forka, wybierając przycisk KOD.

    Zrzut ekranu usługi GitHub przedstawiający przyciski codespaces dla repozytorium.

  2. Na karcie Codespaces wybierz wielokropek ....

    Zrzut ekranu usługi GitHub przedstawiający kartę Codespaces z wyróżnioną kontrolką wielokropka.

  3. Wybierz + Nowy z opcjami, aby wybrać konkretny kontener deweloperski Codespaces.

    Zrzut ekranu usługi GitHub z wyróżnionym elementem menu Codespaces New z opcjami.

  4. Wybierz następujące opcje, a następnie wybierz pozycję Utwórz przestrzeń kodu.

    • Gałąź: main
    • Konfiguracja kontenera deweloperskiego: Tutorial: Upload file to storage with SAS Token
    • Region: zaakceptuj wartość domyślną
    • Typ maszyny: zaakceptuj wartość domyślną

    Zrzut ekranu GitHub Codespaces New z menu opcji z wyróżnionym następującym kontenerem deweloperskim: Samouczek – przekazanie pliku do magazynu za pomocą tokenu SAS.

  5. Poczekaj na rozpoczęcie Codespace. Ten proces uruchamiania może potrwać kilka minut.

  6. Otwórz nowy terminal w przestrzeni kodu.

    Napiwek

    Możesz użyć menu głównego, aby przejść do opcji menu Terminal, a następnie wybrać opcję Nowy terminal .

    Zrzut ekranu przedstawiający opcję menu codespaces, aby otworzyć nowy terminal.

  7. Sprawdź wersje narzędzi używanych w tym samouczku.

    node --version
npm --version
func --version

    Ten samouczek wymaga następujących wersji każdego narzędzia, które są wstępnie zainstalowane w danym środowisku:

    Narzędzie Wersja
    Node.js ≥ 18
    npm ≥ 9,5
    Podstawowe narzędzia usługi Azure Functions ≥ 4,5098

  8. Zamknij terminal.

  9. Pozostałe kroki opisane w tym samouczku mają miejsce w kontekście tego kontenera deweloperskiego.

Instalowanie zależności

Przykładowa aplikacja dla tego samouczka znajduje się w folderze azure-upload-file-to-storage. W projekcie nie trzeba używać żadnych innych folderów.

  1. W programie Visual Studio Code otwórz terminal i przejdź do folderu projektu.

    cd azure-upload-file-to-storage

  2. Podziel terminal, aby mieć dwa terminale— jeden dla aplikacji klienckiej i jeden dla aplikacji interfejsu API.

  3. W jednym z terminali uruchom następujące polecenie, aby zainstalować zależności aplikacji API i uruchomić aplikację.

    cd api && npm install

  4. W innym terminalu uruchom polecenie , aby zainstalować aplikację klienta .

    cd app && npm install

Tworzenie zasobu magazynu za pomocą rozszerzenia programu Visual Studio

Utwórz zasób usługi Azure Storage do użycia z przykładową aplikacją. Przechowywanie jest używane do:

  • Wyzwalacze w aplikacji usługi Azure Functions
  • Magazynowanie obiektów blob (plików)

  1. Przejdź do rozszerzenia usługi Azure Storage.

  2. W razie potrzeby zaloguj się do platformy Azure.

  3. Kliknij prawym przyciskiem myszy subskrypcję, a następnie wybierz pozycję Create Resource....

    Zrzut ekranu programu Visual Studio Code w Eksploratorze Platformy Azure z menu prawym przyciskiem myszy przedstawiający wyróżniony element Utwórz zasób.

  4. Wybierz Utwórz konto storage z listy.

  5. Postępuj zgodnie z instrukcjami w poniższej tabeli, aby dowiedzieć się, jak utworzyć zasób usługi Storage.

    Własność Wartość
    Wprowadź globalnie unikatową nazwę nowej aplikacji internetowej. Wprowadź unikatową wartość, taką jak fileuploadstor, jako nazwę zasobu usługi Storage.

    Ta unikatowa nazwa to nazwa zasobu używana w następnej sekcji. Użyj maksymalnie 24 znaków alfanumerycznych. Potrzebujesz tej nazwy konta do późniejszego użycia.
    Wybierz lokalizację nowych zasobów. Użyj zalecanej lokalizacji.

  6. Po zakończeniu procesu tworzenia aplikacji zostanie wyświetlone powiadomienie z informacjami o nowym zasobie.

    Zrzut ekranu programu Visual Studio Code przedstawiający pasek aktywności Azure i powiadomienie o pomyślnym utworzeniu konta magazynowego.

Konfiguracja CORS dla magazynu

Ponieważ przeglądarka jest używana do przekazywania pliku, konto usługi Azure Storage musi skonfigurować mechanizm CORS w celu zezwalania na żądania między źródłami. Te ustawienia mechanizmu CORS są używane w tym samouczku w celu uproszczenia kroków i nie są przeznaczone do wskazywania najlepszych rozwiązań ani zabezpieczeń. Dowiedz się więcej o mechanizmie CORS dla usługi Azure Storage.

  1. Przejdź do rozszerzenia usługi Azure Storage. Kliknij prawym przyciskiem myszy zasób magazynu i wybierz Otwórz w Portalu.

  2. W sekcji Ustawienia konta magazynu w portalu Azure wybierz Udostępnianie zasobów (CORS).

  3. Użyj następujących właściwości, aby ustawić mechanizm CORS na potrzeby tego samouczka.

    • Dozwolone źródła: *
    • Dozwolone metody: wszystkie z wyjątkiem poprawki
    • Dozwolone nagłówki: *
    • Uwidocznione nagłówki: *
    • Maksymalny wiek: 86400

  4. Wybierz pozycję Zapisz.

Udzielanie dostępu anonimowego do magazynu

Po przekazaniu pliku scenariusz samouczka wymaga publicznego dostępu do obiektu BLOB do przeglądania. Dla uproszczenia ten przewodnik umożliwia anonimowy dostęp do przekazanych plików.

  1. Aby włączyć dostęp publiczny w witrynie Azure Portal, wybierz stronę Przegląd konta magazynu, w sekcji Właściwości wybierz pozycję Dostęp anonimowy obiektu blob , a następnie wybierz pozycję Wyłączone.
  2. Na stronie Konfiguracja włącz Zezwalaj na anonimowy dostęp do obiektu blob.

Utwórz kontener przesyłania

Utwórz prywatny kontener, który ma publicznie czytelne bloby.

  1. Będąc nadal w koncie magazynu na portalu Azure, w sekcji Przechowywanie danych wybierz pozycję Kontenery.

  2. Wybierz przycisk + Kontener aby utworzyć upload kontener z następującymi ustawieniami:

    • Nazwa: upload
    • Poziom dostępu publicznego: Blob

  3. Wybierz pozycję Utwórz.

Przyznaj sobie dostęp do danych blob.

Podczas tworzenia zasobu nie masz uprawnień do wyświetlania zawartości kontenera. Ta autoryzacja jest zarezerwowana dla określonych ról IAM. Dodaj konto, aby można było wyświetlać bloby w kontenerach.

  1. Na koncie magazynu w portalu Azure, wybierz pozycję Kontrola dostępu (IAM).
  2. Wybierz pozycję Dodaj przypisania ról.
  3. Wyszukaj i wybierz Współtwórca danych Blob Storage. Wybierz pozycję Dalej.
  4. Wybierz + Wybierz członków.
  5. Wyszukaj i wybierz swoje konto.
  6. Wybierz Przejrzyj i przypisz.
  7. Wybierz pozycję Kontenery, a następnie kontener przesyłania. Nie powinno być obiektów blob w kontenerze i nie powinno być błędów autoryzacji.

Pobieranie poświadczeń zasobu przechowywania

Poświadczenia zasobu Storage są używane w aplikacji Azure Functions API do nawiązania połączenia z zasobem Storage.

  1. W witrynie Azure Portal w sekcji Zabezpieczenia i sieć wybierz pozycję Klucze dostępu.

  2. Skopiuj klucz Key .

  3. W programie Visual Studio Code w folderze ./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/apizmień nazwę pliku z local.settings.json.sample na local.settings.json. Plik jest ignorowany przez usługę Git, więc nie można go zaewidencjonować w kontroli źródła.

  4. Zaktualizuj ustawienia local.settings.json, korzystając z poniższej tabeli.

    Własność Wartość Opis
    Azure_Storage_AccountName Nazwa konta usługi Azure Storage, na przykład: fileuploadstor. Używany w kodzie źródłowym do nawiązywania połączenia z zasobem usługi Storage.
    Azure_Storage_AccountKey Klucz konta usługi Azure Storage Używany w kodzie źródłowym do nawiązywania połączenia z zasobem usługi Storage.
    AzureWebJobsStorage Parametry połączenia konta usługi Azure Storage Środowisko uruchomieniowe Azure Functions służy do przechowywania stanu i dzienników.

Może się wydawać, że dwa razy wprowadzono te same dane uwierzytelniające konta, raz jako klucz i raz jako łańcuch połączenia. Zrobiłeś to, ale specjalnie na potrzeby tego prostego samouczka. Ogólnie rzecz biorąc, aplikacje usługi Azure Functions powinny mieć oddzielny zasób usługi Storage, który nie jest ponownie używany do innego celu. Podczas tworzenia zasobu funkcji platformy Azure w dalszej części samouczka nie trzeba ustawiać wartości AzureWebJobsStorage dla zasobu w chmurze. Należy ustawić wartości Azure_Storage_AccountName i Azure_Storage_AccountKey , które są używane w kodzie źródłowym.

Uruchamianie aplikacji interfejsu API

Uruchom aplikację usługi Functions, aby upewnić się, że działa prawidłowo przed wdrożeniem jej na platformie Azure.

  1. W terminalu aplikacji interfejsu API uruchom następujące polecenie, aby uruchomić aplikację interfejsu API.

    npm run start

  2. Poczekaj na uruchomienie aplikacji usługi Azure Functions. Zobaczysz, że port aplikacji usługi Azure Functions 7071 jest teraz dostępny. Interfejsy API powinny być również widoczne w terminalu aplikacji API.

    Functions:

        list: [POST,GET] http://localhost:7071/api/list

        sas: [POST,GET] http://localhost:7071/api/sas

        status: [GET] http://localhost:7071/api/status

  3. Wybierz kartę Porty w dolnym okienku, a następnie kliknij prawym przyciskiem myszy port 7071 , a następnie wybierz pozycję Widoczność portu , a następnie wybierz pozycję Publiczny.

    Jeśli nie uwidaczniasz tej aplikacji jako publicznej, podczas korzystania z interfejsu API z aplikacji klienckiej wystąpi błąd.

  4. Aby przetestować działanie interfejsu API i nawiązać połączenie z magazynem, na karcie Porty w dolnym okienku wybierz ikonę globusa w obszarze Adres lokalny dla portu 7071. Spowoduje to otwarcie przeglądarki internetowej do aplikacji funkcji.

  5. Dodaj trasę interfejsu API do paska adresu URL: /api/sas?container=upload&file=test.png. W porządku, że plik nie znajduje się jeszcze w kontenerze. Interfejs API tworzy token SAS na podstawie miejsca, do którego ma zostać przekazany.

  6. Odpowiedź JSON powinna wyglądać mniej więcej tak:

    {
    "url":"https://YOUR-STORAGE-RESOURCE.blob.core.windows.net/upload/test.png?sv=2023-01-03&spr=https&st=2023-07-26T22%3A15%3A59Z&se=2023-07-26T22%3A25%3A59Z&sr=b&sp=w&sig=j3Yc..."
}

  7. Skopiuj bazę adresu URL interfejsu API na pasku adresu przeglądarki (a nie adres URL tokenu SAS w obiekcie JSON), aby użyć go w następnym kroku. Podstawowy adres URL to wszystko przed /api/sas. W następnej sekcji wklejysz ten podstawowy adres URL do pliku zmiennej środowiskowej aplikacji klienckiej.

Konfigurowanie i uruchamianie aplikacji klienckiej

  1. Zmień nazwę pliku ./azure-upload-file-to-storage/app/.env.sample na .env.

  2. Otwórz plik .env i wklej podstawowy adres URL z poprzedniej sekcji jako wartość VITE_API_SERVER.

    Przykład środowiska Codespaces może wyglądać mniej więcej tak, jak VITE_API_SERVER=https://improved-space-fishstick-pgvxvxjpqgrh6qxp-7071.app.github.dev

  3. W innym podzielonym terminalu uruchom aplikację kliencka za pomocą następującego polecenia:

    npm run dev

  4. Poczekaj, aż terminal zwróci następujące powiadomienie, że aplikacja jest dostępna na porcie 5173.

      VITE v4.4.4  ready in 410 ms

  ➜  Local:   https://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

  5. Wybierz kartę Porty w dolnym okienku, a następnie kliknij prawym przyciskiem myszy port 5173 i wybierz ikonę globusa.

  6. Powinna zostać wyświetlona aplikacja internetowa.

    Zrzut ekranu przedstawiający przeglądarkę internetową z dostępnym przyciskiem Wybierz plik.

  7. Interakcja z aplikacją internetową:

    • Wybierz plik obrazu (*.jpg lub *.png) z komputera lokalnego do przekazania.
    • Wybierz przycisk Uzyskaj SAS, aby zażądać tokenu SAS z aplikacji API. Odpowiedź zawiera pełny adres URL, którego należy użyć do przekazania pliku do Storage.
    • Wybierz przycisk Przekaż , aby wysłać plik obrazu bezpośrednio do usługi Storage.

    Zrzut ekranu przeglądarki internetowej pokazujący aplikację webową z plikiem obrazu wgranym i miniaturą pliku wyświetloną.

  8. Aplikacja kliencka i aplikacja interfejsu API pomyślnie współpracowały ze sobą w konteneryzowanym środowisku dewelopera.

Zatwierdź zmiany kodu

  1. W programie Visual Studio Code otwórz kartę kontroli źródła kodu .
  2. Wybierz ikonę +, aby zainscenizować wszystkie zmiany. Te zmiany powinny zawierać tylko nowe pliki package-lock.json dla folderów app i api na potrzeby tego samouczka.

Wdrażanie statycznej aplikacji internetowej na platformie Azure

Aplikacja usługi Azure Functions korzysta z funkcji w wersji zapoznawczej. Musi być wdrożone w West US 2, aby działało prawidłowo.

  1. W programie Visual Studio Code wybierz eksploratora platformy Azure.

  2. W eksploratorze platformy Azure kliknij prawym przyciskiem myszy nazwę subskrypcji, a następnie wybierz pozycję Create Resource....

  3. Wybierz pozycję Utwórz statyczną aplikację internetową z listy.

  4. Postępuj zgodnie z instrukcjami w poniższej tabeli, aby dowiedzieć się, jak utworzyć zasób statycznej aplikacji internetowej.

    Własność Wartość
    Wprowadź globalnie unikatową nazwę nowej aplikacji internetowej. Wprowadź unikatową wartość, taką jak fileuploadstor, jako nazwę zasobu usługi Storage.

    Ta unikatowa nazwa to nazwa zasobu używana w następnej sekcji. Używaj tylko znaków i cyfr o długości do 24. Potrzebujesz tej nazwy konta do późniejszego użycia.
    Wybierz lokalizację nowych zasobów. Użyj zalecanej lokalizacji.

  5. Postępuj zgodnie z monitami, aby podać następujące informacje:

    Komunikat Wejść
    Wybierz grupę zasobów dla nowych zasobów. Użyj grupy zasobów, którą utworzyłeś dla swojego zasobu magazynowego.
    Wprowadź nazwę nowej statycznej aplikacji internetowej. Zaakceptuj nazwę domyślną.
    Wybierz jednostkę SKU Wybierz darmowy SKU dla tego samouczka. Jeśli masz już bezpłatny zasób statycznej aplikacji internetowej w subskrypcji, wybierz następną warstwę cenową.
    Wybierz ustawienie wstępne kompilacji, aby skonfigurować domyślną strukturę projektu. Wybierz Niestandardowe.
    Wybierz lokalizację kodu aplikacji azure-upload-file-to-storage/app
    Wybieranie lokalizacji kodu usługi Azure Functions azure-upload-file-to-storage/api
    Wprowadź ścieżkę danych wyjściowych kompilacji... dist

    wartość to ścieżka z twojej aplikacji do wygenerowanych plików statycznych.
    Wybierz lokalizację nowych zasobów. Wybierz region blisko Ciebie.

  6. Po zakończeniu procesu zostanie wyświetlone wyskakujące okienko powiadomień. Wybierz pozycję Wyświetl/Edytuj przepływ pracy.

  7. W zdalnym repozytorium dodano nowy plik przepływu pracy do wdrażania aplikacji w usłudze Static Web Apps. Pobierz ten plik w dół do środowiska za pomocą następującego polecenia w terminalu:

    git pull origin main

  8. Otwórz plik przepływu pracy znajdujący się w /.github/workflows/.

  9. Sprawdź, czy sekcja przepływu pracy specyficzna dla statycznej aplikacji internetowej tego samouczka powinna wyglądać następująco:

    ###### 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: "/azure-upload-file-to-storage/app" # App source code path
api_location: "/azure-upload-file-to-storage/api" # Api source code path - optional
output_location: "dist" # Built app content directory - optional
###### End of Repository/Build Configurations ######

  10. Przejdź do forka na GitHubie przykładu, https://github.com/<YOUR-ACCOUNT>/azure-typescript-e2e-apps/actions, aby sprawdzić, czy akcja kompilacji i wdrożenia o nazwie Azure Static Web Apps CI/CDzostała ukończona pomyślnie. Wykonanie tej akcji może potrwać kilka minut.

  11. Przejdź do witryny Azure Portal dla swojej aplikacji i wyświetl sekcję Interfejsy API w obszarze Ustawienia. Nazwa zasobu zaplecza w środowisku produkcyjnym to (managed), co wskazuje, że API zostały pomyślnie wdrożone.

  12. Wybierz (zarządzana), aby wyświetlić listę interfejsów API załadowanych w aplikacji.

    • lista
    • Sas
    • stan

  13. Przejdź do strony Przegląd, aby znaleźć adres URL dla wdrożonej aplikacji.

  14. Wdrożenie aplikacji zostało ukończone.

Konfigurowanie interfejsu API przy użyciu nazwy i klucza zasobu usługi Storage

Aplikacja wymaga nazwy i klucza zasobu usługi Azure Storage, zanim interfejs API działa poprawnie. Po wdrożeniu w usłudze Azure Static Web Apps aplikacja kliencka i interfejs API są hostowane z tej samej domeny, eliminując konieczność ustawienia zmiennej środowiskowej aplikacji klienckiej VITE_API_SERVER.

  1. Nadal w eksploratorze platformy Azure kliknij prawym przyciskiem myszy zasób Statyczna aplikacja internetowa i wybierz polecenie Otwórz w portalu.

  2. Wybierz pozycję Konfiguracja w sekcji Ustawienia .

  3. Dodaj ustawienia aplikacji przy użyciu poniższej tabeli.

    Własność Wartość Opis
    Azure_Storage_AccountName Nazwa konta usługi Azure Storage, na przykład: fileuploadstor. Używany w kodzie źródłowym do nawiązywania połączenia z zasobem usługi Storage.
    Azure_Storage_AccountKey Klucz konta usługi Azure Storage Używany w kodzie źródłowym do nawiązywania połączenia z zasobem usługi Storage.

  4. Wybierz pozycję Zapisz na stronie Konfiguracja, aby zapisać oba ustawienia.

Używanie statycznej aplikacji internetowej wdrożonej na platformie Azure

Sprawdź, czy wdrożenie i konfiguracja zakończyła się pomyślnie przy użyciu witryny sieci Web.

  1. W programie Visual Studio Code kliknij prawym przyciskiem myszy aplikację statyczną internetową w eksploratorze platformy Azure i wybierz pozycję Przeglądaj witrynę.
  2. W nowym oknie przeglądarki internetowej wybierz pozycję Wybierz plik , a następnie wybierz plik obrazu (*.png lub *.jpg), aby przekazać.
  3. Wybierz Get sas token. Ta akcja przekazuje nazwę pliku do interfejsu API i odbiera adres URL tokenu SAS niezbędny do przekazania pliku.
  4. Wybierz pozycję Przekaż plik, żeby użyć adresu URL tokenu SAS, aby przesłać plik. W przeglądarce zostanie wyświetlona miniatura i adres URL przekazanego pliku.

Czyszczenie zasobów

W programie Visual Studio Code użyj eksploratora platformy Azure dla grup zasobów. Kliknij prawym przyciskiem myszy grupę zasobów, a następnie wybierz polecenie Usuń.

Ta akcja powoduje usunięcie wszystkich zasobów w grupie, w tym zasobów usługi Storage i statycznej aplikacji internetowej.

Rozwiązywanie problemów

Zgłoś problemy z tym przykładem w repozytorium GitHub. Dołącz następujące elementy do problemu:

  • Adres URL artykułu
  • Krok lub kontekst w artykule, który był problematyczny
  • Środowisko projektowe

Przykładowy kod

Powiązana zawartość