A continuació, apreneu a utilitzar JavaScript per crear un URL temporal descarregable per a Azure Blob Storage.js

Generació d'URL temporals per a descàrregues de blob a Azure amb Next.js

Solució de JavaScript frontal que utilitza l'SDK d'Azure i els URL d'objectes 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>  
  );  
}  

Gestió de la descàrrega de dades blob amb la gestió d'errors

Enfocament Node.js de back-end que utilitza Streams per a un ús eficient de la memòria

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

Proves unitàries per a la funcionalitat de descàrrega de blob

Proves d'unitat amb Jest per garantir un comportament de baixada correcte

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

Preguntes i solucions habituals per a problemes d'URL blob a Next.js

1. Per què l'URL del meu blob no mostra la imatge correcta?
2. Assegureu-vos que esteu utilitzant URL.createObjectURL() a l'objecte blob correcte i que el tipus de contingut del blob estigui definit correctament a Azure Blob Storage.
3. Com puc revocar un URL de blob per evitar fuites de memòria?
4. Ús URL.revokeObjectURL() després d'haver acabat amb el blob per alliberar memòria i evitar referències obsoletes.
5. És possible protegir els URL blob amb caducitat?
6. Sí, utilitzant Azure Shared Access Signatures (SAS), podeu crear URL que caduquin després d'un temps determinat, proporcionant un control d'accés segur.
7. Què he de fer si els URL de blob no funcionen als navegadors mòbils?
8. Implementeu alternatives com la redirecció utilitzant window.location.href o demanar als usuaris que desin manualment el fitxer si els URL de blob no són compatibles.
9. Com puc gestionar les descàrregues de fitxers grans de manera eficient a Node.js?
10. Ús readableStreamBody.pipe() per transmetre el contingut directament a la resposta, la qual cosa evita la sobrecàrrega de memòria i garanteix transferències de fitxers fluides.
11. Puc baixar fitxers des d'Azure Blob Storage sense utilitzar URL temporals?
12. Sí, podeu configurar una ruta de backend amb Express i transmetre el contingut del blob directament al client mitjançant blockBlobClient.download().
13. Per què la meva descàrrega de blob retorna dades danyades?
14. Comproveu si la codificació i el tipus de contingut del blob estan configurats correctament a Azure. A més, assegureu-vos que el cos de la resposta s'analitza correctament response.blobBody.
15. Quina és la millor manera de provar les baixades de blob?
16. Utilitzeu Jest i Supertest per simular sol·licituds de descàrrega i validar que la vostra lògica de descàrrega funciona correctament en diverses condicions.
17. Els URL blob es poden reutilitzar diverses vegades?
18. Sí, però tingueu en compte que les sessions del navegador poden emmagatzemar aquests URL a la memòria cau. Ús URL.revokeObjectURL() per alliberar memòria i evitar problemes.
19. Com puc obrir un URL de blob en una pestanya nova?
20. Ús window.open() amb l'URL del blob per obrir-lo en una pestanya nova. Assegureu-vos que la configuració del navegador permeti finestres emergents si això no funciona.
21. Com puc mostrar el contingut del blob en línia en lloc de descarregar-lo?
22. Estableix l'adequat content-disposition capçalera a Azure Blob Storage per mostrar el fitxer en línia en lloc de forçar una baixada.

Punts clau de la gestió de les baixades de blobs:

Gestionar les descàrregues de blob de manera eficient en a Next.js L'aplicació implica convertir dades binàries en URL temporals mitjançant mètodes com ara URL.createObjectURL(). La gestió adequada de la memòria, com ara la revocació d'URL d'objectes, és crucial per evitar fuites i problemes de rendiment.

La seguretat és una altra consideració clau, ja que es poden compartir URL temporals. La implementació de fitxes SAS afegeix un control d'accés limitat en el temps. A més, garantir la compatibilitat del navegador i oferir alternatives per als dispositius que no admeten URL blob garanteix una experiència d'usuari òptima.