Następnie dowiedz się, jak używać języka JavaScript do tworzenia tymczasowego adresu URL do pobrania dla Azure Blob Storage.js

Generowanie tymczasowych adresów URL do pobierania obiektów BLOB na platformie Azure za pomocą Next.js

Frontonowe rozwiązanie JavaScript korzystające z zestawu Azure SDK i adresów URL obiektów 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>  
  );  
}  

Obsługa pobierania danych obiektu BLOB za pomocą zarządzania błędami

Podejście zaplecza Node.js wykorzystujące strumienie w celu wydajnego wykorzystania pamięci

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

Testy jednostkowe dla funkcjonalności pobierania obiektów BLOB

Testowanie jednostkowe przy użyciu Jest w celu zapewnienia prawidłowego działania pobierania

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

Często zadawane pytania i rozwiązania problemów z adresami URL obiektów BLOB w Next.js

1. Dlaczego mój adres URL obiektu blob nie wyświetla prawidłowego obrazu?
2. Upewnij się, że używasz URL.createObjectURL() na właściwym obiekcie blob i czy typ zawartości obiektu blob jest poprawnie ustawiony w usłudze Azure Blob Storage.
3. Jak mogę odwołać adres URL obiektu BLOB, aby zapobiec wyciekom pamięci?
4. Używać URL.revokeObjectURL() po zakończeniu pracy z obiektem BLOB, aby zwolnić pamięć i uniknąć nieaktualnych odniesień.
5. Czy można zabezpieczyć adresy URL obiektów BLOB z wygaśnięciem?
6. Tak, używając Azure Shared Access Signatures (SAS), możesz tworzyć adresy URL, które wygasają po określonym czasie, zapewniając bezpieczną kontrolę dostępu.
7. Co powinienem zrobić, jeśli adresy URL obiektów BLOB nie działają w przeglądarkach mobilnych?
8. Zaimplementuj rozwiązania awaryjne, takie jak przekierowanie using window.location.href lub monitowanie użytkowników o ręczne zapisanie pliku, jeśli adresy URL obiektów BLOB nie są obsługiwane.
9. Jak efektywnie zarządzać pobieraniem dużych plików w Node.js?
10. Używać readableStreamBody.pipe() przesyłać strumieniowo zawartość bezpośrednio do odpowiedzi, co zapobiega przeciążeniu pamięci i zapewnia płynne przesyłanie plików.
11. Czy mogę pobierać pliki z usługi Azure Blob Storage bez używania tymczasowych adresów URL?
12. Tak, możesz skonfigurować trasę zaplecza za pomocą Express i przesyłać strumieniowo zawartość obiektów BLOB bezpośrednio do klienta za pomocą blockBlobClient.download().
13. Dlaczego pobrany obiekt BLOB zwraca uszkodzone dane?
14. Sprawdź, czy kodowanie i typ zawartości obiektu BLOB są poprawnie skonfigurowane na platformie Azure. Upewnij się także, że treść odpowiedzi została poprawnie przeanalizowana przy użyciu response.blobBody.
15. Jaki jest najlepszy sposób testowania pobierania obiektów BLOB?
16. Użyj Jest i Supertest, aby symulować żądania pobierania i sprawdzać, czy logika pobierania działa poprawnie w różnych warunkach.
17. Czy adresy URL obiektów BLOB mogą być wielokrotnie wykorzystywane?
18. Tak, ale należy pamiętać, że sesje przeglądarki mogą buforować te adresy URL. Używać URL.revokeObjectURL() aby zwolnić pamięć i uniknąć problemów.
19. Jak otworzyć adres URL obiektu BLOB w nowej karcie?
20. Używać window.open() z adresem URL obiektu blob, aby otworzyć go w nowej karcie. Jeśli to nie zadziała, upewnij się, że ustawienia przeglądarki zezwalają na wyskakujące okienka.
21. Jak wyświetlić zawartość obiektu BLOB w tekście, zamiast ją pobierać?
22. Ustaw odpowiednie content-disposition nagłówek w usłudze Azure Blob Storage, aby wyświetlić plik w tekście, zamiast wymuszać pobieranie.

Najważniejsze wnioski z zarządzania pobieraniem obiektów BLOB:

Wydajna obsługa pobierania obiektów BLOB w pliku Następny.js aplikacja polega na konwertowaniu danych binarnych na tymczasowe adresy URL przy użyciu metod takich jak URL.createObjectURL(). Właściwe zarządzanie pamięcią, na przykład odwoływanie adresów URL obiektów, ma kluczowe znaczenie dla uniknięcia wycieków i problemów z wydajnością.

Bezpieczeństwo to kolejna kluczowa kwestia, ponieważ można udostępniać tymczasowe adresy URL. Implementacja tokenów SAS dodaje ograniczoną czasowo kontrolę dostępu. Ponadto zapewnienie zgodności przeglądarki i zapewnienie rozwiązań awaryjnych dla urządzeń, które nie obsługują adresów URL obiektów BLOB, zapewnia optymalne środowisko użytkownika.