Lær derefter, hvordan du bruger JavaScript til at oprette en midlertidig URL-adresse, der kan downloades til Azure Blob Storage.js

Generering af midlertidige URL'er til Blob-downloads i Azure med Next.js

Front-end JavaScript-løsning ved hjælp af Azure SDK og Blob Object URL'er

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

Håndtering af Blob Data Download med Fejlhåndtering

Back-end Node.js-tilgang ved hjælp af Streams til effektiv hukommelsesbrug

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

Enhedstest for blob-downloadfunktionalitet

Enhedstest ved hjælp af Jest for at sikre korrekt downloadadfærd

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

Almindelige spørgsmål og løsninger til Blob URL-problemer i Next.js

1. Hvorfor viser min blob-URL ikke det korrekte billede?
2. Sørg for, at du bruger URL.createObjectURL() på det korrekte blob-objekt, og at blobens indholdstype er indstillet korrekt i Azure Blob Storage.
3. Hvordan kan jeg tilbagekalde en blob-URL for at forhindre hukommelseslækager?
4. Bruge URL.revokeObjectURL() efter du er færdig med klatten for at frigøre hukommelse og undgå forældede referencer.
5. Er det muligt at sikre blob-URL'er med udløb?
6. Ja, ved at bruge Azure's Shared Access Signatures (SAS), kan du oprette URL'er, der udløber efter en vis tid, hvilket giver sikker adgangskontrol.
7. Hvad skal jeg gøre, hvis blob-URL'er ikke virker på mobilbrowsere?
8. Implementer fallbacks såsom omdirigering vha window.location.href eller beder brugerne om manuelt at gemme filen, hvis blob-URL'er ikke understøttes.
9. Hvordan administrerer jeg store fildownloads effektivt i Node.js?
10. Bruge readableStreamBody.pipe() at streame indholdet direkte til svaret, hvilket forhindrer overbelastning af hukommelsen og sikrer glatte filoverførsler.
11. Kan jeg downloade filer fra Azure Blob Storage uden at bruge midlertidige URL'er?
12. Ja, du kan oprette en backend-rute med Express og streame blob-indholdet direkte til klienten ved hjælp af blockBlobClient.download().
13. Hvorfor returnerer min blob-download beskadigede data?
14. Tjek, om klattens kodning og indholdstype er korrekt konfigureret i Azure. Sørg også for, at svarteksten er korrekt parset vha response.blobBody.
15. Hvad er den bedste måde at teste blob-downloads på?
16. Brug Jest og Supertest til at simulere downloadanmodninger og validere, at din downloadlogik fungerer korrekt på tværs af forskellige forhold.
17. Kan blob-URL'er genbruges flere gange?
18. Ja, men husk på, at browsersessioner kan cache disse URL'er. Bruge URL.revokeObjectURL() for at frigive hukommelse og undgå problemer.
19. Hvordan åbner jeg en blob-URL på en ny fane?
20. Bruge window.open() med blob-URL'en for at åbne den i en ny fane. Sørg for, at browserindstillingerne tillader pop-ups, hvis dette ikke virker.
21. Hvordan viser jeg blob-indholdet inline i stedet for at downloade det?
22. Indstil den passende content-disposition header i Azure Blob Storage for at vise filen inline i stedet for at tvinge en download.

Vigtige ting ved at administrere Blob-downloads:

Håndtering af blob-downloads effektivt i en Next.js app involverer at konvertere binære data til midlertidige URL'er ved hjælp af metoder som URL.createObjectURL(). Korrekt hukommelsesstyring, såsom tilbagekaldelse af objekt-URL'er, er afgørende for at undgå lækager og ydeevneproblemer.

Sikkerhed er en anden vigtig overvejelse, da midlertidige URL'er kan deles. Implementering af SAS-tokens tilføjer tidsbegrænset adgangskontrol. Derudover sikrer det en optimal brugeroplevelse at sikre browserkompatibilitet og at give reservedele til enheder, der ikke understøtter blob-URL'er.