Tiếp theo, tìm hiểu cách sử dụng JavaScript để tạo URL có thể tải xuống tạm thời cho Azure Blob Storage.js

Tạo URL tạm thời để tải xuống Blob trong Azure bằng Next.js

Giải pháp JavaScript ngoại vi sử dụng URL đối tượng Blob và SDK Azure

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

Xử lý tải xuống dữ liệu Blob bằng quản lý lỗi

Phương pháp tiếp cận Node.js back-end sử dụng Luồng để sử dụng bộ nhớ hiệu quả

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

Kiểm tra đơn vị cho chức năng tải xuống Blob

Kiểm tra đơn vị bằng Jest để đảm bảo hành vi tải xuống chính xác

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

Các câu hỏi và giải pháp phổ biến cho các vấn đề về URL Blob trong Next.js

1. Tại sao URL blob của tôi không hiển thị hình ảnh chính xác?
2. Đảm bảo bạn đang sử dụng URL.createObjectURL() trên đối tượng blob chính xác và loại nội dung của blob được đặt chính xác trong Azure Blob Storage.
3. Làm cách nào tôi có thể thu hồi URL blob để tránh rò rỉ bộ nhớ?
4. Sử dụng URL.revokeObjectURL() sau khi bạn thực hiện xong blob để giải phóng bộ nhớ và tránh các tham chiếu cũ.
5. Có thể bảo mật các URL blob khi hết hạn không?
6. Có, sử dụng Azure Shared Access Signatures (SAS), bạn có thể tạo các URL hết hạn sau một thời gian nhất định, cung cấp khả năng kiểm soát truy cập an toàn.
7. Tôi nên làm gì nếu URL blob không hoạt động trên trình duyệt di động?
8. Triển khai các biện pháp dự phòng như chuyển hướng bằng cách sử dụng window.location.href hoặc nhắc người dùng lưu tệp theo cách thủ công nếu URL blob không được hỗ trợ.
9. Làm cách nào để quản lý tải xuống tệp lớn một cách hiệu quả trong Node.js?
10. Sử dụng readableStreamBody.pipe() để truyền trực tiếp nội dung đến phản hồi, giúp ngăn chặn tình trạng quá tải bộ nhớ và đảm bảo truyền tệp suôn sẻ.
11. Tôi có thể tải xuống tệp từ Azure Blob Storage mà không cần sử dụng URL tạm thời không?
12. Có, bạn có thể thiết lập tuyến phụ trợ với Express và truyền trực tiếp nội dung blob tới máy khách bằng cách sử dụng blockBlobClient.download().
13. Tại sao tải xuống blob của tôi lại trả về dữ liệu bị hỏng?
14. Kiểm tra xem mã hóa và loại nội dung của blob có được định cấu hình chính xác trong Azure hay không. Ngoài ra, hãy đảm bảo nội dung phản hồi được phân tích cú pháp chính xác bằng cách sử dụng response.blobBody.
15. Cách tốt nhất để kiểm tra tải xuống blob là gì?
16. Sử dụng Jest và Supertest để mô phỏng các yêu cầu tải xuống và xác thực rằng logic tải xuống của bạn hoạt động chính xác trong nhiều điều kiện khác nhau.
17. URL blob có thể được sử dụng lại nhiều lần không?
18. Có, nhưng hãy nhớ rằng các phiên trình duyệt có thể lưu các URL này vào bộ nhớ đệm. Sử dụng URL.revokeObjectURL() để giải phóng bộ nhớ và tránh các vấn đề.
19. Làm cách nào để mở URL blob trong tab mới?
20. Sử dụng window.open() bằng URL blob để mở nó trong tab mới. Đảm bảo cài đặt trình duyệt cho phép cửa sổ bật lên nếu điều này không hiệu quả.
21. Làm cách nào để hiển thị nội dung blob nội tuyến thay vì tải xuống?
22. Đặt thích hợp content-disposition tiêu đề trong Azure Blob Storage để hiển thị tệp nội tuyến thay vì buộc tải xuống.

Những điểm rút ra chính từ việc quản lý tải xuống Blob:

Xử lý tải xuống blob một cách hiệu quả trong Next.js ứng dụng liên quan đến việc chuyển đổi dữ liệu nhị phân thành các URL tạm thời bằng các phương pháp như URL.createObjectURL(). Quản lý bộ nhớ phù hợp, chẳng hạn như thu hồi URL đối tượng, là rất quan trọng để tránh rò rỉ và các vấn đề về hiệu suất.

Bảo mật là một yếu tố quan trọng khác cần cân nhắc vì các URL tạm thời có thể được chia sẻ. Việc triển khai mã thông báo SAS bổ sung thêm khả năng kiểm soát truy cập có giới hạn thời gian. Ngoài ra, việc đảm bảo khả năng tương thích của trình duyệt và cung cấp dự phòng cho các thiết bị không hỗ trợ URL blob sẽ đảm bảo trải nghiệm người dùng tối ưu.