Lär dig sedan hur du använder JavaScript för att skapa en tillfällig nedladdningsbar URL för Azure Blob Storage.js

Generera tillfälliga webbadresser för Blob-nedladdningar i Azure med Next.js

Front-end JavaScript-lösning med Azure SDK och 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>  
  );  
}  

Hantera nedladdning av blobdata med felhantering

Back-end Node.js-metoden med strömmar för effektiv minnesanvändning

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

Enhetstest för blobnedladdningsfunktioner

Enhetstestning med Jest för att säkerställa korrekt nedladdningsbeteende

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

Vanliga frågor och lösningar för blob-URL-problem i Next.js

1. Varför visar inte min blob-URL rätt bild?
2. Se till att du använder URL.createObjectURL() på rätt blob-objekt och att blobens innehållstyp är korrekt inställd i Azure Blob Storage.
3. Hur kan jag återkalla en blob-URL för att förhindra minnesläckor?
4. Använda URL.revokeObjectURL() efter att du är klar med klatten för att frigöra minne och undvika inaktuella referenser.
5. Är det möjligt att säkra blobadresser med utgångsdatum?
6. Ja, med Azures Shared Access Signatures (SAS), kan du skapa webbadresser som löper ut efter en viss tid, vilket ger säker åtkomstkontroll.
7. Vad ska jag göra om blob-URL:er inte fungerar i mobila webbläsare?
8. Implementera fallbacks såsom omdirigering med hjälp av window.location.href eller uppmana användare att manuellt spara filen om blob-URL:er inte stöds.
9. Hur hanterar jag stora filnedladdningar effektivt i Node.js?
10. Använda readableStreamBody.pipe() att strömma innehållet direkt till svaret, vilket förhindrar minnesöverbelastning och säkerställer smidiga filöverföringar.
11. Kan jag ladda ner filer från Azure Blob Storage utan att använda tillfälliga webbadresser?
12. Ja, du kan ställa in en backend-rutt med Express och strömma blob-innehållet direkt till klienten med hjälp av blockBlobClient.download().
13. Varför returnerar min blob-nedladdning skadad data?
14. Kontrollera om blobens kodning och innehållstyp är korrekt konfigurerade i Azure. Se också till att svaret är korrekt tolkat med hjälp av response.blobBody.
15. Vad är det bästa sättet att testa blob-nedladdningar?
16. Använd Jest och Supertest för att simulera nedladdningsförfrågningar och verifiera att din nedladdningslogik fungerar korrekt under olika förhållanden.
17. Kan blob-URL:er återanvändas flera gånger?
18. Ja, men kom ihåg att webbläsarsessioner kan cachelagra dessa webbadresser. Använda URL.revokeObjectURL() för att frigöra minne och undvika problem.
19. Hur öppnar jag en blob-URL på en ny flik?
20. Använda window.open() med blob-URL för att öppna den på en ny flik. Se till att webbläsarinställningarna tillåter popup-fönster om detta inte fungerar.
21. Hur visar jag blobinnehållet inline istället för att ladda ner det?
22. Ställ in lämplig content-disposition header i Azure Blob Storage för att visa filen inline istället för att tvinga fram en nedladdning.

Viktiga tips för att hantera Blob-nedladdningar:

Hantera blob-nedladdningar effektivt i en Next.js app innebär att konvertera binär data till temporära webbadresser med metoder som URL.createObjectURL(). Korrekt minneshantering, som att återkalla objekt-URL:er, är avgörande för att undvika läckor och prestandaproblem.

Säkerhet är en annan viktig faktor, eftersom tillfälliga webbadresser kan delas. Implementering av SAS-tokens ger tidsbegränsad åtkomstkontroll. Att säkerställa webbläsarkompatibilitet och tillhandahålla reservdelar för enheter som inte stöder blob-URL:er säkerställer dessutom en optimal användarupplevelse.