Seuraavaksi opi käyttämään JavaScriptiä väliaikaisen ladattavan URL-osoitteen luomiseen Azure Blob Storage.js:lle

Väliaikaisten URL-osoitteiden luominen Blob-latauksille Azuressa Next.js:n avulla

Käyttöliittymän JavaScript-ratkaisu, joka käyttää Azure SDK:ta ja Blob Object URL -osoitteita

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

Blob-tietojen latauksen käsittely virheenhallinnan avulla

Back-end Node.js -lähestymistapa, jossa käytetään Streamia tehokkaaseen muistin käyttöön

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

Blob-lataustoimintojen yksikkötestit

Yksikkötestaus Jestillä oikean latauskäyttäytymisen varmistamiseksi

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

Yleisiä kysymyksiä ja ratkaisuja blob-URL-ongelmiin Next.js:ssä

1. Miksi blob-URL-osoitteeni ei näytä oikeaa kuvaa?
2. Varmista, että käytät URL.createObjectURL() oikeassa blob-objektissa ja että blobin sisältötyyppi on asetettu oikein Azure Blob Storagessa.
3. Kuinka voin peruuttaa blob-URL-osoitteen muistivuotojen estämiseksi?
4. Käyttää URL.revokeObjectURL() Kun olet lopettanut blobin käytön vapauttaaksesi muistia ja välttääksesi vanhentuneet viittaukset.
5. Onko mahdollista suojata vanhentuvia blob-URL-osoitteita?
6. Kyllä, käyttämällä Azurea Shared Access Signatures (SAS), voit luoda URL-osoitteita, jotka vanhenevat tietyn ajan kuluttua ja tarjoavat suojatun pääsynhallinnan.
7. Mitä minun pitäisi tehdä, jos blob-URL-osoitteet eivät toimi mobiiliselaimissa?
8. Ota käyttöön varavaihtoehtoja, kuten uudelleenohjaus käyttämällä window.location.href tai kehottaa käyttäjiä tallentamaan tiedoston manuaalisesti, jos blob-URL-osoitteita ei tueta.
9. Kuinka hallitsen suurten tiedostojen latauksia tehokkaasti Node.js:ssä?
10. Käyttää readableStreamBody.pipe() suoratoistaa sisältöä suoraan vastaukseen, mikä estää muistin ylikuormituksen ja varmistaa sujuvan tiedostojen siirron.
11. Voinko ladata tiedostoja Azure Blob Storagesta ilman väliaikaisia ​​URL-osoitteita?
12. Kyllä, voit määrittää taustareitin Expressillä ja suoratoistaa blob-sisältöä suoraan asiakkaalle blockBlobClient.download().
13. Miksi blob-lataukseni palauttaa vioittuneita tietoja?
14. Tarkista, onko blobin koodaus ja sisältötyyppi määritetty oikein Azuressa. Varmista myös, että vastauksen runko on jäsennetty oikein käyttämällä response.blobBody.
15. Mikä on paras tapa testata blob-latauksia?
16. Käytä Jest ja Supertest simuloidaksesi latauspyyntöjä ja varmistaaksesi, että latauslogiikkasi toimii oikein eri olosuhteissa.
17. Voidaanko blob-URL-osoitteita käyttää useita kertoja?
18. Kyllä, mutta muista, että selainistunnot voivat tallentaa nämä URL-osoitteet välimuistiin. Käyttää URL.revokeObjectURL() vapauttaaksesi muistia ja välttääksesi ongelmia.
19. Miten blob-URL-osoite avataan uudessa välilehdessä?
20. Käyttää window.open() blobin URL-osoitteen kanssa avataksesi sen uudelle välilehdelle. Varmista, että selaimen asetukset sallivat ponnahdusikkunat, jos tämä ei toimi.
21. Kuinka näytän blob-sisällön upotettuna sen lataamisen sijaan?
22. Aseta sopiva content-disposition Otsikko Azure Blob Storagessa näyttääksesi tiedoston rivissä sen sijaan, että pakottaisit sen lataamaan.

Tärkeimmät blob-latausten hallinnan ohjeet:

Blob-latausten tehokas käsittely a Next.js sovellus sisältää binääritietojen muuntamisen väliaikaisiksi URL-osoitteiksi käyttämällä menetelmiä, kuten URL.createObjectURL(). Oikea muistin hallinta, kuten objektien URL-osoitteiden peruuttaminen, on erittäin tärkeää vuotojen ja suorituskykyongelmien välttämiseksi.

Turvallisuus on toinen tärkeä näkökohta, sillä väliaikaisia ​​URL-osoitteita voidaan jakaa. SAS-tunnisteiden käyttöönotto lisää aikarajoitetun pääsynhallinnan. Lisäksi selainyhteensopivuuden varmistaminen ja varaosien tarjoaminen laitteille, jotka eivät tue blob-URL-osoitteita, takaavat optimaalisen käyttökokemuksen.