Στη συνέχεια, μάθετε πώς να χρησιμοποιείτε JavaScript για να δημιουργήσετε μια προσωρινή διεύθυνση URL με δυνατότητα λήψης για το Azure Blob Storage.js

Δημιουργία προσωρινών διευθύνσεων URL για λήψεις Blob στο Azure με το Next.js

Λύση JavaScript διεπαφής με χρήση των διευθύνσεων URL Azure SDK και Blob Object

// 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 με διαχείριση σφαλμάτων

Προσέγγιση Back-end Node.js χρησιμοποιώντας Streams για αποτελεσματική χρήση μνήμης

// 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

Δοκιμή μονάδας χρησιμοποιώντας το Jest για να διασφαλιστεί η σωστή συμπεριφορά λήψης

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

Συνήθεις ερωτήσεις και λύσεις για ζητήματα URL Blob στο Next.js

1. Γιατί η διεύθυνση URL του blob μου δεν εμφανίζει τη σωστή εικόνα;
2. Βεβαιωθείτε ότι χρησιμοποιείτε URL.createObjectURL() στο σωστό αντικείμενο blob και ότι ο τύπος περιεχομένου του blob έχει ρυθμιστεί σωστά στο Azure Blob Storage.
3. Πώς μπορώ να ανακαλέσω μια διεύθυνση URL blob για να αποτρέψω διαρροές μνήμης;
4. Χρήση URL.revokeObjectURL() αφού τελειώσετε με το blob για να ελευθερώσετε μνήμη και να αποφύγετε τις παλιές αναφορές.
5. Είναι δυνατόν να προστατεύσετε διευθύνσεις URL blob με λήξη;
6. Ναι, χρησιμοποιώντας το Azure Shared Access Signatures (SAS), μπορείτε να δημιουργήσετε διευθύνσεις URL που λήγουν μετά από ορισμένο χρόνο, παρέχοντας ασφαλή έλεγχο πρόσβασης.
7. Τι πρέπει να κάνω εάν τα URL blob δεν λειτουργούν σε προγράμματα περιήγησης για κινητά;
8. Εφαρμόστε εναλλακτικές λύσεις, όπως ανακατεύθυνση χρησιμοποιώντας window.location.href ή ζητώντας από τους χρήστες να αποθηκεύσουν με μη αυτόματο τρόπο το αρχείο εάν δεν υποστηρίζονται διευθύνσεις URL blob.
9. Πώς μπορώ να διαχειριστώ αποτελεσματικά τις λήψεις μεγάλων αρχείων στο Node.js;
10. Χρήση readableStreamBody.pipe() για τη ροή του περιεχομένου απευθείας στην απόκριση, η οποία αποτρέπει την υπερφόρτωση της μνήμης και εξασφαλίζει ομαλή μεταφορά αρχείων.
11. Μπορώ να κατεβάσω αρχεία από το Azure Blob Storage χωρίς να χρησιμοποιώ προσωρινές διευθύνσεις URL;
12. Ναι, μπορείτε να ρυθμίσετε μια διαδρομή backend με το Express και να μεταδώσετε το περιεχόμενο blob απευθείας στον πελάτη χρησιμοποιώντας blockBlobClient.download().
13. Γιατί η λήψη του blob μου επιστρέφει κατεστραμμένα δεδομένα;
14. Ελέγξτε εάν η κωδικοποίηση και ο τύπος περιεχομένου του blob έχουν διαμορφωθεί σωστά στο Azure. Επίσης, βεβαιωθείτε ότι το σώμα απόκρισης αναλύεται σωστά χρησιμοποιώντας response.blobBody.
15. Ποιος είναι ο καλύτερος τρόπος για να δοκιμάσετε τις λήψεις blob;
16. Χρησιμοποιήστε το Jest και το Supertest για να προσομοιώσετε αιτήματα λήψης και να επικυρώσετε ότι η λογική λήψης λειτουργεί σωστά σε διάφορες συνθήκες.
17. Μπορούν οι διευθύνσεις URL blob να επαναχρησιμοποιηθούν πολλές φορές;
18. Ναι, αλλά να έχετε κατά νου ότι οι περίοδοι λειτουργίας του προγράμματος περιήγησης ενδέχεται να αποθηκεύσουν αυτές τις διευθύνσεις URL. Χρήση URL.revokeObjectURL() για να απελευθερώσετε τη μνήμη και να αποφύγετε προβλήματα.
19. Πώς μπορώ να ανοίξω μια διεύθυνση URL blob σε μια νέα καρτέλα;
20. Χρήση window.open() με τη διεύθυνση URL blob για να το ανοίξετε σε μια νέα καρτέλα. Βεβαιωθείτε ότι οι ρυθμίσεις του προγράμματος περιήγησης επιτρέπουν τα αναδυόμενα παράθυρα, εάν αυτό δεν λειτουργεί.
21. Πώς μπορώ να εμφανίσω το περιεχόμενο blob inline αντί να το κατεβάσω;
22. Ρυθμίστε το κατάλληλο content-disposition κεφαλίδα στο Azure Blob Storage για να εμφανίζεται το αρχείο ενσωματωμένο αντί να επιβάλλεται λήψη.

Βασικά σημεία από τη διαχείριση λήψεων Blob:

Αποτελεσματικός χειρισμός των λήψεων blob σε α Επόμενο.js Η εφαρμογή περιλαμβάνει τη μετατροπή δυαδικών δεδομένων σε προσωρινές διευθύνσεις URL χρησιμοποιώντας μεθόδους όπως URL.createObjectURL(). Η σωστή διαχείριση της μνήμης, όπως η ανάκληση διευθύνσεων URL αντικειμένων, είναι ζωτικής σημασίας για την αποφυγή διαρροών και προβλημάτων απόδοσης.

Η ασφάλεια είναι ένα άλλο βασικό στοιχείο, καθώς οι προσωρινές διευθύνσεις URL μπορούν να κοινοποιηθούν. Η εφαρμογή διακριτικών SAS προσθέτει έλεγχο πρόσβασης περιορισμένου χρόνου. Επιπλέον, η διασφάλιση της συμβατότητας του προγράμματος περιήγησης και η παροχή εναλλακτικών για συσκευές που δεν υποστηρίζουν διευθύνσεις URL blob διασφαλίζει μια βέλτιστη εμπειρία χρήστη.