Mengunggah gambar ke blob Azure Storage

  • Artikel
  • xi menit untuk membaca

Gunakan aplikasi React sisi klien untuk mengunggah file gambar ke blob Azure Storage menggunakan paket npm @azure/storage-blob Azure Storage.

Pekerjaan pemrograman TypeScript dilakukan untuk Anda, tutorial ini berfokus pada penggunaan lingkungan Azure lokal dan jarak jauh dengan sukses dari dalam Visual Studio Code dengan ekstensi Azure.

  • Kode sampel
  • Dokumentasi Referensi Azure Hulk Storage

Arsitektur dan fungsionalitas aplikasi

Artikel ini mencakup beberapa tugas Azure teratas untuk pengembang JavaScript:

  • Jalankan aplikasi React/TypeScript secara lokal dengan Visual Studio Code
  • Membuat sumber daya Azure Blob Storage dan mengonfigurasi untuk pengunggahan file
    • Mengonfigurasi CORS
    • Membuat token tanda tangan akses bersama (SAS)
  • Mengonfigurasi kode untuk pustaka klien SDK Azure untuk menggunakan token SAS untuk mengautentikasi ke layanan

Aplikasi React sampel, tersedia di GitHub, terdiri dari elemen-elemen berikut:

  • React di-host di port 3000
  • Skrip pustaka klien Azure SDK untuk diunggah ke blob Penyimpanan

Aplikasi React sederhana yang terhubung ke blob Azure Storage.

one. Siapkan lingkungan pengembangan

  • Akun pengguna Azure dengan langganan aktif. Buat akun gratis.
  • Node.js LTS dengan NPM, pengelola paket Node.js yang diinstal ke mesin lokal Anda.
  • Visual Studio Lawmaking diinstal ke komputer lokal Anda.
  • Ekstensi Visual Studio Code:
    • Azure Resource
    • Azure Storage - digunakan untuk melihat sumber daya Storage
    • Azure Static Spider web Apps - digunakan untuk membuat dan menyebarkan aplikasi React ke Azure

2. Buat fork dan kloning aplikasi sampel

  1. Buka URL sampel GitHub ini di browser web:

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

  2. Pilih Fork untuk membuat fork Anda sendiri dari proyek sampel ini. Fork GitHub Anda sendiri diperlukan untuk menyebarkan sampel ini ke Azure sebagai aplikasi spider web statis.

  3. Pilih tombol Kode, lalu salin URL Klon.

  4. Di concluding bash, kloning repositori bercabang Anda, ganti Supersede-WITH-YOUR-ACCOUNT-Proper name dengan nama akun GitHub Anda:

                      git clone https://github.com/REPLACE-WITH-YOUR-Business relationship-Name/js-e2e-browser-file-upload-storage-blob

  5. Ubah ke direktori baru dan buka Visual Studio Code.

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

3. Instal dependensi dan jalankan proyek lokal

  1. Di Visual Studio Code, buka final bash terintegrasi, Ctrl + Shift + `, dan jalankan perintah berikut untuk menginstal dependensi sampel.

                      npm install

  2. Di jendela concluding yang sama, jalankan perintah untuk menjalankan aplikasi web.

                      npm start

  3. Buka browser web dan gunakan URL berikut untuk melihat aplikasi spider web di komputer lokal Anda.

                      http://localhost:3000/

    Jika Anda melihat aplikasi spider web sederhana di browser Anda dengan teks yang tidak dikonfigurasi Penyimpanan, Anda telah berhasil dengan bagian tutorial ini.

    Aplikasi Node.js sederhana yang terhubung ke database MongoDB.

  4. Hentikan kode dengan Ctrl + C di concluding Visual Studio Lawmaking.

4. Buat sumber daya Storage dengan ekstensi Visual Studio

  1. Navigasikan ke ekstensi Azure Storage. Klik kanan pada langganan lalu pilih Create Storage Account....

    Navigasikan ke ekstensi Azure Storage. Klik kanan pada langganan lalu pilih 'Buat Akun Storage ...'.

  2. Ikuti petunjuk menggunakan tabel berikut untuk memahami cara membuat sumber daya Penyimpanan Anda.

    Properti Nilai
    Masukkan nama unik secara global untuk aplikasi web baru. Masukkan nilai seperti fileuploaddemo, untuk nama sumber daya Penyimpanan Anda.

    Nama unik ini adalah nama sumber daya Anda yang digunakan di bagian berikutnya. Gunakan hanya karakter dan angka, hingga 24 panjangnya. Anda memerlukan nama akun ini untuk digunakan nanti.

  3. Saat proses pembuatan aplikasi selesai, pemberitahuan akan muncul dengan informasi tentang sumber daya baru.

    Saat proses pembuatan aplikasi selesai, pemberitahuan akan muncul dengan informasi tentang sumber daya baru.

Hasilkan token SAS sebelum mengonfigurasi CORS.

  1. Di ekstensi Visual Studio Lawmaking untuk Storage, klik kanan sumber daya lalu pilih Buka di Portal. Ini membuka portal Azure ke sumber daya Storage Anda yang tepat.

  2. Buka bagian Keamanan + jaringan dan pilih Tanda tangan akses bersama.

  3. Konfigurasikan token SAS dengan pengaturan berikut.

    Properti Nilai
    Layanan yang diizinkan Blob
    Jenis sumber daya yang diizinkan Layanan, Kontainer, Objek
    Izin yang diizinkan Membaca, menulis, menghapus, membuat daftar, menambahkan, membuat
    Izin pembuatan versi blob Dicentang
    Mengizinkan izin indeks blob Baca/Tulis dan Filter harus diperiksa
    Tanggal/waktu mulai dan akhir Terima tanggal/waktu mulai dan atur waktu tanggal akhir 24 jam di masa mendatang. Token SAS Anda hanya bagus selama 24 jam.
    Hanya untuk HTTPS Dipilih
    Tingkat perutean yang disukai Dasar
    Kunci Penandatanganan key1 dipilih

    Konfigurasikan token SAS seperti yang ditampilkan dalam gambar. Pengaturan dijelaskan di bawah gambar.

  4. Pilih Buat SAS dan string koneksi.

  5. Segera salin token SAS. Anda tidak akan dapat mencantumkan token ini jadi jika Anda tidak menyalinnya, Anda harus membuat token SAS baru.

6. Atur nilai Penyimpanan dalam file .env

Token SAS digunakan saat kueri dibuat ke sumber daya berbasis cloud Anda.

  1. Buat nama file .env di root proyek.

  2. Tambahkan dua variabel yang diperlukan dengan nilai penyimpanannya:

                      REACT_APP_STORAGESASTOKEN= REACT_APP_STORAGERESOURCENAME=

    React membuat file statis dengan variabel-variabel ini.

  3. Jika token dimulai dengan tanda tanya, hapus ?. File kode menyediakan ? untuk Anda sehingga Anda tidak membutuhkannya dalam token.

7. Konfigurasikan CORS untuk sumber daya Azure Storage

Konfigurasikan CORS untuk sumber daya Anda sehingga kode React sisi klien dapat mengakses akun penyimpanan Anda.

  1. Saat masih berada di portal Microsoft Azure, di bagian Pengaturan, pilih Berbagi sumber daya (CORS).

  2. Konfigurasikan CORS layanan Blob sebagai peragaan dalam gambar. Pengaturan dijelaskan di bawah gambar.

    Properti Nilai
    Asal yang diperbolehkan *
    Metode yang diperbolehkan Semua kecuali patch.
    Header yang diizinkan *
    Header yang diekspos *
    Usia maks 86400

    Konfigurasikan CORS sebagai peragaan dalam gambar. Pengaturan dijelaskan di bawah gambar.

  3. Pilih Simpan di atas pengaturan untuk menyimpannya ke sumber daya. Kode tidak memerlukan perubahan apa pun untuk bekerja dengan pengaturan CORS ini.

8. Jalankan proyek secara lokal untuk memverifikasi koneksi ke akun Storage

Token SAS dan nama akun penyimpanan Anda diatur dalam file src/azure-storage-blob.ts, sehingga Anda siap untuk menjalankan aplikasi.

  1. Jika aplikasi tidak berjalan, mulai lagi:

                      npm outset

  2. Buka URL berikut di browser:

    http://localhost:3000

    Situs web React yang terhubung ke blob Azure Storage harus ditampilkan dengan tombol pemilihan file dan tombol unggah file.

  3. Pilih gambar dari folder images yang akan diunggah lalu pilih tombol Unggah!.

  4. Kode klien front-finish React memanggil ke ./src/azure-storage-blob.ts untuk mengautentikasi ke Azure, lalu membuat Kontainer Penyimpanan (jika belum ada), lalu mengunggah file ke kontainer tersebut.

9. Sebarkan aplikasi spider web statik ke Azure

  1. Di Visual Studio Code, pilih penjelajah Azure.

  2. Jika Anda melihat jendela pop-up yang meminta Anda melakukan perubahan, jangan lakukan hal ini. Sampel harus siap digunakan tanpa perubahan.

    Untuk memutar kembali perubahan, di Visual Studio Code, pilih ikon Kontrol Sumber di bilah aktivitas. Kemudian pilih setiap file yang diubah dalam daftar Perubahan, dan pilih ikon Buang perubahan.

  3. Klik kanan pada nama langganan, lalu pilih Buat Aplikasi Web Statik (Tingkat Lanjut).

  4. Ikuti perintah untuk menyediakan informasi berikut:

    Perintah Masukkan
    Masukkan nama untuk aplikasi spider web statik baru. Buat nama unik untuk sumber daya Anda. Misalnya, Anda dapat melakukan prepend pada nama Anda ke nama repositori seperti, upload-file-to-storage.
    Pilih grup sumber daya untuk sumber daya baru. Gunakan grup sumber daya yang Anda buat untuk sumber daya penyimpanan Anda.
    Memilih SKU Pilih SKU costless untuk tutorial ini. Jika Anda sudah memiliki sumber daya Aplikasi Web Statis gratis yang digunakan, pilih tingkat harga berikutnya.
    Pilih preset build untuk mengonfigurasi struktur proyek default. Pilih React.
    Memilih lokasi kode aplikasi Anda / - Ini menunjukkan file package.json berada di root repositori.
    Memilih lokasi kode Azure Functions Anda Terima nilai default-nya. Meskipun sampel ini tidak menggunakan API, Anda dapat menambahkannya nanti.
    Masukkan jalur output build Anda... build

    Ini adalah jalur dari aplikasi ke file statis (dihasilkan).
    Pilih lokasi untuk sumber daya baru. Pilih wilayah yang dekat dengan Anda.

  5. Setelah proses selesai, popular-upward notifikasi akan ditampilkan. Pilih Lihat/Edit Alur Kerja.

    Cuplikan layar sebagian pop-up pemberitahuan Visual Studio Code dengan tombol Lihat/Edit Alur Kerja disorot.

10. Tambahkan rahasia Azure Storage ke rahasia GitHub

  1. Di browser web, kembali ke fork GitHub Anda dari proyek sampel untuk menambahkan dua rahasia dan nilai-nilainya:

                      https://github.com/YOUR-GITHUB-Business relationship/js-e2e-browser-file-upload-storage-blob/settings/secrets/actions

    Tangkapan layar browser web yang ditampilkanhttps://github.com, di halaman Pengaturan -> Rahasia, dengan tombol rahasia repositori baru disorot.

11. Konfigurasikan aplikasi web statis untuk terhubung ke sumber daya penyimpanan

Edit alur kerja dan rahasia GitHub untuk terhubung ke Azure Storage.

  1. Di Visual Studio Lawmaking, buka file YAML alur kerja .github/workflows dan tambahkan dua variabel lingkungan penyimpanan setelah bagian with ke bagian build_and_deploy_job.

                      jobs:   build_and_deploy_job:     if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.issue.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)           activity: "upload"           ###### Repository/Build Configurations - These values can exist configured to match your app requirements. ######           # For more information regarding Static Spider web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig           app_location: "/" # App source lawmaking path           api_location: "api" # Api source code path - optional           output_location: "build" # Built app content directory - optional           ###### End of Repository/Build Configurations ######         env: # Add together environs variables here             REACT_APP_STORAGESASTOKEN: ${{secrets.REACT_APP_STORAGESASTOKEN}}             REACT_APP_STORAGERESOURCENAME: ${{secrets.REACT_APP_STORAGERESOURCENAME}}

    Ini menarik rahasia untuk proses pembuatan.

  2. Di Visual Studio Code, pilih Kontrol Sumber, Ctrl + Shift + M, lalu pilih ikon penambahan untuk menambahkan file *.yml yang diubah.

  3. Masukkan komentar untuk komit Anda seperti Adding Storage secrets.

  4. Dorong ke fork GitHub Anda dengan memilih ikon Sinkronkan perubahan pada bilah status.

    Tangkapan layar sebagian bilah status Visual Studio Code.

  5. Di jendela pop-up untuk mengonfirmasi apakah Anda ingin mendorong dan menarik dari repositori jarak jauh Anda, pilih OK.

    Jika Anda mendapatkan kesalahan pada langkah ini, checkout remote git Anda untuk memastikan Anda mengkloning fork Anda: git remote -v.

  6. Dorongan ini memicu buat dan sebarkan baru untuk aplikasi web statis Anda.

12. Verifikasi pekerjaan buat dan sebarkan selesai

  1. Di browser web, kembali ke fork GitHub Anda dari proyek sampel.

  2. Pilih Tindakan, lalu pilih tindakan Azure Static Spider web Apps CI/CD.

  3. Pilih Pekerjaan Buat dan Sebarkan untuk menyaksikan proses selesai.

    Cuplikan layar browser web yang menunjukkan keberhasilan tindakan GitHub

13. Gunakan aplikasi web statis yang disebarkan Azure

  1. Di Visual Studio Lawmaking, klik kanan aplikasi web Statis Anda dari penjelajah Azure dan pilih

    Tangkapan layar parsial memilih Jelajahi Situs dari situs web Azure Static.

  2. Di jendela browser web baru, pilih file dan unggah file.

Memecahkan masalah koneksi lokal ke akun Penyimpanan

Jika Anda menerima kesalahan atau file Anda tidak diunggah ke kontainer, periksa hal berikut:

  • Buat ulang token SAS Anda, pastikan token Anda dibuat pada tingkat sumber daya Penyimpanan dan bukan tingkat kontainer. Salin token baru ke dalam kode di lokasi yang benar.
  • Periksa apakah string token yang Anda salin ke dalam kode tidak berisi ? (tanda tanya) di awal string.
  • Verifikasi pengaturan CORS Anda untuk sumber daya Penyimpanan Anda.

Fungsionalitas tombol Unggah

File TypeScript src/App.tsx disediakan sebagai bagian dari pembuatan aplikasi tersebut dengan create-react-app. File telah dimodifikasi untuk menyediakan tombol pemilihan file dan tombol unggah dan kode pendukung untuk menyediakan fungsi itu.

Kode yang terhubung ke kode Azure Blob Storage disorot. Panggilan untuk uploadFileToBlob menampilkan semua hulk (file) dalam kontainer sebagai daftar datar. Daftar itu ditampilkan dengan fungsi DisplayImagesFromContainer.

              // ./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.Chemical element => {   // all blobs in container   const [blobList, setBlobList] = useState<cord[]>([]);    // current file to upload into container   const [fileSelected, setFileSelected] = useState(null);    // UI/form direction   const [uploading, setUploading] = useState(false);   const [inputKey, setInputKey] = useState(Math.random().toString(36));    const onFileChange = (issue: any) => {     // capture file into state     setFileSelected(outcome.target.files[0]);   };    const onFileUpload = async () => {     // set UI     setUploading(truthful);      // *** UPLOAD TO AZURE STORAGE ***     const blobsInContainer: string[] = await uploadFileToBlob(fileSelected);      // gear up UI for results     setBlobList(blobsInContainer);      // reset country/form     setFileSelected(null);     setUploading(simulated);     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 proper name and paradigm   const DisplayImagesFromContainer = () => (     <div>       <h2>Container items</h2>       <ul>         {blobList.map((detail) => {           render (             <li key={item}>               <div>                 {Path.basename(item)}                 <br />                 <img src={particular} alt={item} tiptop="200" />               </div>             </li>           );         })}       </ul>     </div>   );    return (     <div>       <h1>Upload file to Azure Hulk Storage</h1>       {storageConfigured && !uploading && DisplayForm()}       {storageConfigured && uploading && <div>Uploading</div>}       <hour />       {storageConfigured && blobList.length > 0 && DisplayImagesFromContainer()}       {!storageConfigured && <div>Storage is not configured.</div>}     </div>   ); };  consign default App;

Upload file ke blob Azure Storage dengan pustaka klien SDK Azure

Kode untuk mengunggah file ke Azure Storage adalah framework-doubter. Karena kode dibuat untuk tutorial, pilihan dibuat untuk kesederhanaan dan pemahaman. Pilihan ini dijelaskan; Anda harus meninjau proyek Anda sendiri untuk penggunaan, keamanan, dan efisiensi yang disengaja.

Sampel membuat dan menggunakan kontainer dan file yang dapat diakses publik. Jika Anda ingin mengamankan file Anda di proyek Anda sendiri, Anda memiliki banyak lapisan tempat Anda dapat mengontrolnya mulai dari memerlukan autentikasi keseluruhan ke sumber daya Anda hingga izin yang sangat spesifik pada setiap objek blob.

Dependensi dan variabel

File TypeScript azure-storage-blob.ts memuat dependensi, dan menarik variabel yang diperlukan dengan variabel lingkungan atau string berkode keras.

Variabel Deskripsi
sasToken Token SAS yang dibuat dengan portal Azure telah ditambahkan dengan ?. Hapus sebelum mengaturnya dalam variabel sasToken Anda.
container Nama kontainer di penyimpanan Hulk. Anda dapat menganggap ini setara dengan folder atau direktori untuk sistem file.
storageAccountName Nama sumber daya Anda. 
              // THIS IS SAMPLE CODE ONLY - Not MEANT FOR Product Utilize import { BlobServiceClient, ContainerClient} from '@azure/storage-blob';  const containerName = `tutorial-container`; const sasToken = process.env.REACT_APP_STORAGESASTOKEN; const storageAccountName = procedure.env.REACT_APP_STORAGERESOURCENAME;

Membuat klien Penyimpanan dan mengelola langkah-langkah

Fungsi uploadFileToBlob adalah fungsi utama dari file. Ini membuat objek klien untuk layanan Penyimpanan, kemudian membuat klien ke objek kontainer, mengunggah file, lalu mendapatkan daftar semua hulk dalam kontainer.

              const uploadFileToBlob = async (file: File | null): Promise<string[]> => {   if (!file) return [];    // become BlobService = notice `?` is pulled out of sasToken - if created in Azure portal   const blobService = new BlobServiceClient(     `https://${storageAccountName}.hulk.cadre.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);    // go listing of blobs in container   render getBlobsInContainer(containerClient); };

Mengunggah file ke hulk

Fungsi createBlobInContainer mengunggah file ke kontainer, menggunakan kelas BlockBlobClient, metode uploadData. Jenis konten harus dikirim dengan permintaan jika Anda berniat menggunakan fungsi browser, yang tergantung pada jenis file, seperti menampilkan gambar.

              const createBlobInContainer = async (containerClient: ContainerClient, file: File) => {      // create blobClient for container   const blobClient = containerClient.getBlockBlobClient(file.proper noun);    // set mimetype every bit determined from browser with file upload command   const options = { blobHTTPHeaders: { blobContentType: file.type } };    // upload file   await blobClient.uploadData(file, options); }

Mendapatkan daftar blob

Fungsi getBlobsInContainer mendapatkan daftar URL, menggunakan kelas ContainerClient, metode listBlobsFlat, untuk hulk dalam kontainer. URL dibuat untuk digunakan sebagai src dari tampilan gambar dalam HTML: <img src={item} alt={particular} 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 look (const blob of containerClient.listBlobsFlat()) {     // if image is public, merely construct URL     returnedBlobUrls.push(       `https://${storageAccountName}.blob.core.windows.cyberspace/${containerName}/${blob.name}`     );   }    return returnedBlobUrls; }

Membersihkan sumber daya

Di Visual Studio Code, gunakan penjelajah Azure untuk Grup Sumber Daya, klik kanan grup sumber daya Anda lalu pilih Hapus.

Ini menghapus semua sumber daya dalam grup, termasuk sumber daya Aplikasi web Penyimpanan dan Statis Anda.

Langkah berikutnya

Jika Anda ingin melanjutkan aplikasi ini, pelajari cara menyebarkan aplikasi ke Azure untuk hosting dengan salah satu pilihan berikut:

  • Mengunggah sebagai aplikasi web statis
  • Unggah ke sumber daya aplikasi web menggunakan ekstensi kode Visual Studio untuk layanan Aplikasi
  • Mengunggah aplikasi ke VM Azure
  • Dokumentasi Azure Blob Storage
  • @azure/storage-blob
    • Paket NPM
    • Dokumentasi rujukan
  • Aplikasi web Azure Static