Apoi, aflați cum să utilizați JavaScript pentru a crea o adresă URL temporară descărcabilă pentru Azure Blob Storage.js

Generarea de adrese URL temporare pentru descărcări blob în Azure cu Next.js

Soluție JavaScript front-end folosind SDK-ul Azure și URL-urile obiectelor 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>  
  );  
}  

Gestionarea descărcării datelor blob cu gestionarea erorilor

Abordarea back-end Node.js folosind Streams pentru o utilizare eficientă a memoriei

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

Teste unitare pentru funcționalitatea de descărcare a blob

Testarea unitară folosind Jest pentru a asigura un comportament corect de descărcare

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

Întrebări și soluții obișnuite pentru problemele cu adresele URL blob în Next.js

1. De ce URL-ul meu blob nu afișează imaginea corectă?
2. Asigurați-vă că utilizați URL.createObjectURL() pe obiectul blob corect și că tipul de conținut al blob-ului este setat corect în Azure Blob Storage.
3. Cum pot revoca o adresă URL blob pentru a preveni scurgerile de memorie?
4. Utilizare URL.revokeObjectURL() după ce ați terminat cu blob-ul pentru a elibera memoria și a evita referințele învechite.
5. Este posibil să securizeze adresele URL blob cu expirare?
6. Da, folosind Azure Shared Access Signatures (SAS), puteți crea adrese URL care expiră după un anumit timp, oferind controlul securizat al accesului.
7. Ce ar trebui să fac dacă adresele URL blob nu funcționează în browserele mobile?
8. Implementați alternative, cum ar fi redirecționarea folosind window.location.href sau solicitarea utilizatorilor să salveze manual fișierul dacă adresele URL blob nu sunt acceptate.
9. Cum gestionez eficient descărcările de fișiere mari în Node.js?
10. Utilizare readableStreamBody.pipe() pentru a transmite conținutul direct către răspuns, ceea ce previne supraîncărcarea memoriei și asigură transferuri fluide de fișiere.
11. Pot descărca fișiere din Azure Blob Storage fără a utiliza adrese URL temporare?
12. Da, puteți configura o rută backend cu Express și puteți transmite conținutul blob direct către client folosind blockBlobClient.download().
13. De ce descărcarea blob-ului meu returnează date corupte?
14. Verificați dacă codificarea blob-ului și tipul de conținut sunt configurate corect în Azure. De asemenea, asigurați-vă că corpul răspunsului este analizat corect folosind response.blobBody.
15. Care este cel mai bun mod de a testa descărcări blob?
16. Utilizați Jest și Supertest pentru a simula solicitările de descărcare și pentru a valida dacă logica dvs. de descărcare funcționează corect în diferite condiții.
17. Adresele URL blob pot fi reutilizate de mai multe ori?
18. Da, dar rețineți că sesiunile de browser pot stoca aceste adrese URL în cache. Utilizare URL.revokeObjectURL() pentru a elibera memoria și a evita problemele.
19. Cum deschid o adresă URL blob într-o filă nouă?
20. Utilizare window.open() cu URL-ul blob pentru a-l deschide într-o filă nouă. Asigurați-vă că setările browserului permit ferestre pop-up dacă acest lucru nu funcționează.
21. Cum afișez conținutul blob-ului în loc să îl descarc?
22. Setați cea potrivită content-disposition antet în Azure Blob Storage pentru a afișa fișierul în linie în loc să forțați o descărcare.

Principalele concluzii din gestionarea descărcărilor de blob:

Gestionarea eficientă a descărcărilor blob într-un Next.js aplicația implică conversia datelor binare în adrese URL temporare folosind metode precum URL.createObjectURL(). Gestionarea corectă a memoriei, cum ar fi revocarea URL-urilor obiectelor, este crucială pentru a evita scurgerile și problemele de performanță.

Securitatea este un alt aspect cheie, deoarece adresele URL temporare pot fi partajate. Implementarea token-urilor SAS adaugă control al accesului limitat în timp. În plus, asigurarea compatibilității browserului și furnizarea de alternative pentru dispozitivele care nu acceptă adrese URL blob asigură o experiență optimă pentru utilizator.