Seterusnya, ketahui cara menggunakan JavaScript untuk mencipta URL boleh dimuat turun sementara untuk Azure Blob Storage.js

Menjana URL Sementara untuk Muat Turun Blob dalam Azure dengan Next.js

Penyelesaian JavaScript bahagian hadapan menggunakan SDK Azure 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>  
  );  
}  

Mengendalikan Muat Turun Data Blob dengan Pengurusan Ralat

Pendekatan Back-end Node.js menggunakan Strim untuk penggunaan memori yang cekap

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

Ujian Unit untuk Kefungsian Muat Turun Blob

Ujian unit menggunakan Jest untuk memastikan tingkah laku muat turun yang betul

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

Soalan dan Penyelesaian Biasa untuk Isu URL Blob dalam Next.js

1. Mengapakah URL gumpalan saya tidak memaparkan imej yang betul?
2. Pastikan anda menggunakan URL.createObjectURL() pada objek gumpalan yang betul dan jenis kandungan gumpalan itu ditetapkan dengan betul dalam Storan Gumpalan Azure.
3. Bagaimanakah saya boleh membatalkan URL gumpalan untuk mengelakkan kebocoran memori?
4. guna URL.revokeObjectURL() selepas anda selesai dengan gumpalan untuk mengosongkan ingatan dan mengelakkan rujukan basi.
5. Adakah mungkin untuk mengamankan URL gumpalan dengan tamat tempoh?
6. Ya, menggunakan Azure Shared Access Signatures (SAS), anda boleh membuat URL yang tamat tempoh selepas masa tertentu, menyediakan kawalan akses selamat.
7. Apakah yang perlu saya lakukan jika URL gumpalan tidak berfungsi pada penyemak imbas mudah alih?
8. Laksanakan sandaran seperti mengubah hala menggunakan window.location.href atau menggesa pengguna untuk menyimpan fail secara manual jika URL gumpalan tidak disokong.
9. Bagaimanakah saya menguruskan muat turun fail besar dengan cekap dalam Node.js?
10. guna readableStreamBody.pipe() untuk menstrim kandungan terus kepada respons, yang menghalang beban memori dan memastikan pemindahan fail lancar.
11. Bolehkah saya memuat turun fail daripada Azure Blob Storage tanpa menggunakan URL sementara?
12. Ya, anda boleh menyediakan laluan hujung belakang dengan Express dan menstrim kandungan gumpalan terus kepada pelanggan yang menggunakan blockBlobClient.download().
13. Mengapa muat turun gumpalan saya mengembalikan data yang rosak?
14. Semak sama ada pengekodan gumpalan dan jenis kandungan dikonfigurasikan dengan betul dalam Azure. Juga, pastikan badan tindak balas dihuraikan dengan betul menggunakan response.blobBody.
15. Apakah cara terbaik untuk menguji muat turun gumpalan?
16. Gunakan Jest dan Supertest untuk mensimulasikan permintaan muat turun dan mengesahkan bahawa logik muat turun anda berfungsi dengan betul merentas pelbagai keadaan.
17. Bolehkah URL gumpalan digunakan semula beberapa kali?
18. Ya, tetapi perlu diingat bahawa sesi penyemak imbas mungkin cache URL ini. guna URL.revokeObjectURL() untuk melepaskan ingatan dan mengelakkan masalah.
19. Bagaimanakah cara saya membuka URL gumpalan dalam tab baharu?
20. guna window.open() dengan URL gumpalan untuk membukanya dalam tab baharu. Pastikan tetapan penyemak imbas membenarkan pop timbul jika ini tidak berfungsi.
21. Bagaimanakah saya boleh memaparkan kandungan gumpalan sebaris dan bukannya memuat turunnya?
22. Tetapkan yang sesuai content-disposition pengepala dalam Azure Blob Storage untuk memaparkan fail sebaris dan bukannya memaksa muat turun.

Ambilan Utama daripada Mengurus Muat Turun Blob:

Mengendalikan muat turun gumpalan dengan cekap dalam a Seterusnya.js app melibatkan menukar data binari kepada URL sementara menggunakan kaedah seperti URL.createObjectURL(). Pengurusan memori yang betul, seperti membatalkan URL objek, adalah penting untuk mengelakkan kebocoran dan isu prestasi.

Keselamatan adalah satu lagi pertimbangan utama, kerana URL sementara boleh dikongsi. Melaksanakan token SAS menambahkan kawalan akses terhad masa. Selain itu, memastikan keserasian penyemak imbas dan menyediakan sandaran untuk peranti yang tidak menyokong URL gumpalan memastikan pengalaman pengguna yang optimum.