Dále se dozvíte, jak pomocí JavaScriptu vytvořit dočasnou adresu URL ke stažení pro Azure Blob Storage.js

Generování dočasných adres URL pro stahování objektů BLOB v Azure pomocí Next.js

Frontendové řešení JavaScriptu pomocí Azure SDK a adres URL objektů 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>  
  );  
}  

Zpracování stahování dat objektů BLOB pomocí správy chyb

Back-end Node.js přístup využívající streamy pro efektivní využití paměti

// 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 jednotek pro funkci stahování objektů BLOB

Testování jednotek pomocí Jest pro zajištění správného chování stahování

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

Běžné otázky a řešení problémů s URL objektů blob v Next.js

1. Proč moje adresa URL blob nezobrazuje správný obrázek?
2. Ujistěte se, že používáte URL.createObjectURL() na správném objektu blob a že je typ obsahu objektu blob správně nastaven v Azure Blob Storage.
3. Jak mohu zrušit adresu URL objektu blob, abych zabránil úniku paměti?
4. Použití URL.revokeObjectURL() poté, co s objektem blob skončíte, uvolníte paměť a vyhnete se zastaralým odkazům.
5. Je možné zabezpečit adresy BLOB s vypršením platnosti?
6. Ano, pomocí Azure Shared Access Signatures (SAS), můžete vytvářet adresy URL, jejichž platnost po určité době vyprší, a poskytuje tak bezpečné řízení přístupu.
7. Co mám dělat, když adresy URL objektů blob nefungují v mobilních prohlížečích?
8. Implementujte záložní řešení, jako je přesměrování pomocí window.location.href nebo výzva uživatelům k ručnímu uložení souboru, pokud adresy URL objektů blob nejsou podporovány.
9. Jak mohu efektivně spravovat stahování velkých souborů v Node.js?
10. Použití readableStreamBody.pipe() streamovat obsah přímo do odpovědi, což zabraňuje přetížení paměti a zajišťuje hladký přenos souborů.
11. Mohu stahovat soubory z Azure Blob Storage bez použití dočasných adres URL?
12. Ano, můžete nastavit backendovou trasu s Express a streamovat obsah blob přímo do klienta pomocí blockBlobClient.download().
13. Proč stahování objektů blob vrací poškozená data?
14. Zkontrolujte, zda je kódování objektu BLOB a typ obsahu správně nakonfigurováno v Azure. Také se ujistěte, že je tělo odpovědi správně analyzováno pomocí response.blobBody.
15. Jaký je nejlepší způsob testování stahování objektů BLOB?
16. Použijte Jest a Supertest k simulaci požadavků na stažení a ověření, že vaše logika stahování funguje správně za různých podmínek.
17. Lze adresy BLOB použít vícekrát?
18. Ano, ale mějte na paměti, že relace prohlížeče mohou tyto adresy URL ukládat do mezipaměti. Použití URL.revokeObjectURL() uvolnit paměť a předejít problémům.
19. Jak mohu otevřít adresu URL objektu blob na nové kartě?
20. Použití window.open() s adresou BLOB a otevřete jej na nové kartě. Ujistěte se, že nastavení prohlížeče povoluje vyskakovací okna, pokud to nefunguje.
21. Jak zobrazím obsah blobu vložený namísto jeho stahování?
22. Nastavte odpovídající content-disposition záhlaví v Azure Blob Storage, abyste zobrazili soubor vložený namísto vynucení stahování.

Klíčové poznatky ze správy stahování objektů BLOB:

Efektivní zpracování stahování objektů BLOB v a Next.js aplikace zahrnuje převod binárních dat na dočasné adresy URL pomocí metod jako URL.createObjectURL(). Správná správa paměti, jako je odvolání adres URL objektů, je zásadní, aby se zabránilo únikům a problémům s výkonem.

Zabezpečení je dalším klíčovým faktorem, protože dočasné adresy URL lze sdílet. Implementace tokenů SAS přidává časově omezené řízení přístupu. Navíc zajištění kompatibility prohlížeče a poskytování záložních řešení pro zařízení, která nepodporují adresy URL objektů blob, zajišťuje optimální uživatelský dojem.