Selanjutnya, pelajari cara menggunakan JavaScript untuk membuat URL sementara yang dapat diunduh untuk Azure Blob Storage.js

Menghasilkan URL Sementara untuk Unduhan Blob di Azure dengan Next.js

Solusi JavaScript front-end menggunakan Azure SDK dan URL Objek Blob

// Import the Azure SDK and setup the blockBlobClient  
import { BlobServiceClient } from "@azure/storage-blob";  
const blobServiceClient = BlobServiceClient.fromConnectionString(process.env.AZURE_STORAGE_CONNECTION_STRING);  
const containerClient = blobServiceClient.getContainerClient("my-container");  
const blockBlobClient = containerClient.getBlockBlobClient("example-image.png");  

// Function to generate temporary downloadable URL from blob  
async function generateBlobDownloadURL() {  
  try {  
    const response = await blockBlobClient.download();  
    const blobData = await response.blobBody; // Retrieve the blob body  
    const tempUrl = URL.createObjectURL(blobData); // Create an object URL  
    console.log("Temporary URL:", tempUrl); // Log for testing  
    return tempUrl;  
  } catch (error) {  
    console.error("Error generating download URL:", error);  
    return null;  
  }  
}  

// Usage in React component within Next.js  
export default function BlobDownloader() {  
  const handleDownload = async () => {  
    const url = await generateBlobDownloadURL();  
    if (url) window.open(url, "_blank"); // Open URL in new tab  
  };  

  return (  
    <button onClick={handleDownload}>Download Image</button>  
  );  
}  

Menangani Pengunduhan Data Blob dengan Manajemen Kesalahan

Pendekatan Node.js back-end menggunakan Streams untuk penggunaan memori yang efisien

// Import necessary Azure SDK modules  
const { BlobServiceClient } = require("@azure/storage-blob");  
const express = require("express");  
const app = express();  
const PORT = process.env.PORT || 3000;  

// Initialize Azure Blob Service Client  
const blobServiceClient = BlobServiceClient.fromConnectionString(process.env.AZURE_STORAGE_CONNECTION_STRING);  

app.get("/download", async (req, res) => {  
  try {  
    const containerClient = blobServiceClient.getContainerClient("my-container");  
    const blockBlobClient = containerClient.getBlockBlobClient("example-image.png");  

    // Stream the blob content to the response  
    const downloadBlockBlobResponse = await blockBlobClient.download();  
    downloadBlockBlobResponse.readableStreamBody.pipe(res);  
  } catch (error) {  
    console.error("Error downloading blob:", error);  
    res.status(500).send("Failed to download blob");  
  }  
});  

// Start Express server  
app.listen(PORT, () => {  
  console.log(`Server is running on port ${PORT}`);  
});  

Pengujian Unit untuk Fungsi Unduhan Blob

Pengujian unit menggunakan Jest untuk memastikan perilaku pengunduhan yang benar

// Test for front-end blob download function using Jest  
import { generateBlobDownloadURL } from "../components/BlobDownloader";  

describe("generateBlobDownloadURL", () => {  
  test("should return a valid object URL", async () => {  
    const url = await generateBlobDownloadURL();  
    expect(url).toMatch(/^blob:/);  
  });  

  test("should handle errors gracefully", async () => {  
    jest.spyOn(console, "error").mockImplementation(() => {});  
    const url = await generateBlobDownloadURL();  
    expect(url).toBeNull();  
  });  
});  

// Test for back-end stream handling using Jest and Supertest  
const request = require("supertest");  
const app = require("../server"); // Assuming the server script is named server.js  

describe("GET /download", () => {  
  it("should return 200 and stream the blob content", async () => {  
    const response = await request(app).get("/download");  
    expect(response.status).toBe(200);  
  });  

  it("should return 500 on error", async () => {  
    jest.spyOn(console, "error").mockImplementation(() => {});  
    const response = await request(app).get("/download");  
    expect(response.status).toBe(500);  
  });  
});  

Pertanyaan Umum dan Solusi untuk Masalah URL Blob di Next.js

1. Mengapa URL blob saya tidak menampilkan gambar yang benar?
2. Pastikan Anda menggunakan URL.createObjectURL() pada objek blob yang benar dan tipe konten blob diatur dengan benar di Azure Blob Storage.
3. Bagaimana cara mencabut URL blob untuk mencegah kebocoran memori?
4. Menggunakan URL.revokeObjectURL() setelah Anda selesai dengan blob untuk mengosongkan memori dan menghindari referensi basi.
5. Apakah mungkin untuk mengamankan URL blob dengan masa berlaku habis?
6. Ya, menggunakan Azure Shared Access Signatures (SAS), Anda dapat membuat URL yang masa berlakunya habis setelah waktu tertentu, sehingga memberikan kontrol akses yang aman.
7. Apa yang harus saya lakukan jika URL blob tidak berfungsi di browser seluler?
8. Terapkan fallback seperti pengalihan menggunakan window.location.href atau meminta pengguna untuk menyimpan file secara manual jika URL blob tidak didukung.
9. Bagaimana cara mengelola unduhan file besar secara efisien di Node.js?
10. Menggunakan readableStreamBody.pipe() untuk mengalirkan konten langsung ke respons, yang mencegah kelebihan memori dan memastikan transfer file lancar.
11. Bisakah saya mengunduh file dari Azure Blob Storage tanpa menggunakan URL sementara?
12. Ya, Anda dapat menyiapkan rute backend dengan Express dan mengalirkan konten blob langsung ke klien menggunakan blockBlobClient.download().
13. Mengapa unduhan blob saya mengembalikan data yang rusak?
14. Periksa apakah pengkodean blob dan tipe konten dikonfigurasi dengan benar di Azure. Selain itu, pastikan isi respons diurai dengan benar menggunakan response.blobBody.
15. Apa cara terbaik untuk menguji unduhan blob?
16. Gunakan Jest dan Supertest untuk menyimulasikan permintaan unduhan dan memvalidasi bahwa logika unduhan Anda berfungsi dengan benar di berbagai kondisi.
17. Bisakah URL blob digunakan kembali beberapa kali?
18. Ya, namun perlu diingat bahwa sesi browser mungkin menyimpan URL ini dalam cache. Menggunakan URL.revokeObjectURL() untuk melepaskan memori dan menghindari masalah.
19. Bagaimana cara membuka URL gumpalan di tab baru?
20. Menggunakan window.open() dengan URL gumpalan untuk membukanya di tab baru. Pastikan pengaturan browser mengizinkan pop-up jika ini tidak berhasil.
21. Bagaimana cara menampilkan konten blob sebaris alih-alih mengunduhnya?
22. Tetapkan yang sesuai content-disposition header di Azure Blob Storage untuk menampilkan file sebaris alih-alih memaksa pengunduhan.

Poin Penting dari Mengelola Unduhan Blob:

Menangani unduhan blob secara efisien dalam a Berikutnya.js aplikasi melibatkan konversi data biner menjadi URL sementara menggunakan metode seperti URL.createObjectURL(). Manajemen memori yang tepat, seperti mencabut URL objek, sangat penting untuk menghindari kebocoran dan masalah kinerja.

Keamanan adalah pertimbangan utama lainnya, karena URL sementara dapat dibagikan. Penerapan token SAS menambah kontrol akses berbatas waktu. Selain itu, memastikan kompatibilitas browser dan menyediakan fallback untuk perangkat yang tidak mendukung URL blob memastikan pengalaman pengguna yang optimal.