Deretter kan du lære hvordan du bruker JavaScript til å opprette en midlertidig nedlastbar URL for Azure Blob Storage.js

Generering av midlertidige URL-er for Blob-nedlastinger i Azure med Next.js

Frontend JavaScript-løsning som bruker 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 av Blob-datanedlasting med feilhåndtering

Back-end Node.js-tilnærming ved å bruke Streams for effektiv minnebruk

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

Enhetstester for Blob-nedlastingsfunksjonalitet

Enhetstesting med Jest for å sikre korrekt nedlastingsatferd

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

Vanlige spørsmål og løsninger for Blob URL-problemer i Next.js

1. Hvorfor viser ikke blob-URL-en min det riktige bildet?
2. Sørg for at du bruker URL.createObjectURL() på riktig blob-objekt og at blobens innholdstype er riktig angitt i Azure Blob Storage.
3. Hvordan kan jeg tilbakekalle en blob-URL for å forhindre minnelekkasjer?
4. Bruk URL.revokeObjectURL() etter at du er ferdig med klatten for å frigjøre minne og unngå foreldede referanser.
5. Er det mulig å sikre blob-URLer med utløp?
6. Ja, bruker Azure Shared Access Signatures (SAS), kan du opprette URL-er som utløper etter en viss tid, noe som gir sikker tilgangskontroll.
7. Hva bør jeg gjøre hvis blob-URL-er ikke fungerer på mobilnettlesere?
8. Implementer fallbacks som omdirigering ved hjelp av window.location.href eller be brukere om å lagre filen manuelt hvis blob-URL-er ikke støttes.
9. Hvordan administrerer jeg store filnedlastinger effektivt i Node.js?
10. Bruk readableStreamBody.pipe() å streame innholdet direkte til responsen, noe som forhindrer minneoverbelastning og sikrer jevne filoverføringer.
11. Kan jeg laste ned filer fra Azure Blob Storage uten å bruke midlertidige URL-er?
12. Ja, du kan sette opp en backend-rute med Express og streame blob-innholdet direkte til klienten som bruker blockBlobClient.download().
13. Hvorfor returnerer min blob-nedlasting ødelagte data?
14. Sjekk om blokkens koding og innholdstype er riktig konfigurert i Azure. Sørg også for at svarteksten er korrekt analysert ved hjelp av response.blobBody.
15. Hva er den beste måten å teste blob-nedlastinger på?
16. Bruk Jest og Supertest til å simulere nedlastingsforespørsler og validere at nedlastingslogikken din fungerer riktig på tvers av ulike forhold.
17. Kan blob-URL-er gjenbrukes flere ganger?
18. Ja, men husk at nettleserøkter kan bufre disse nettadressene. Bruk URL.revokeObjectURL() for å frigjøre minne og unngå problemer.
19. Hvordan åpner jeg en blob-URL i en ny fane?
20. Bruk window.open() med blob-URLen for å åpne den i en ny fane. Sørg for at nettleserinnstillingene tillater popup-vinduer hvis dette ikke fungerer.
21. Hvordan viser jeg blob-innholdet inline i stedet for å laste det ned?
22. Still inn passende content-disposition header i Azure Blob Storage for å vise filen innebygd i stedet for å tvinge ned en nedlasting.

Viktige ting ved å administrere Blob-nedlastinger:

Håndtere blob-nedlastinger effektivt i en Next.js app innebærer å konvertere binære data til midlertidige URL-er ved å bruke metoder som URL.createObjectURL(). Riktig minnebehandling, for eksempel tilbakekalling av objekt-URLer, er avgjørende for å unngå lekkasjer og ytelsesproblemer.

Sikkerhet er en annen viktig faktor, siden midlertidige URL-er kan deles. Implementering av SAS-tokens gir tidsbegrenset tilgangskontroll. I tillegg sikrer det en optimal brukeropplevelse å sikre nettleserkompatibilitet og gi reserver for enheter som ikke støtter blob-URLer.