Далі дізнайтеся, як за допомогою JavaScript створити тимчасову URL-адресу для завантаження для Azure Blob Storage.js

Створення тимчасових URL-адрес для завантажень BLOB-об’єктів у Azure за допомогою Next.js

Інтерфейсне рішення JavaScript із використанням Azure SDK і URL-адрес об’єктів 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>  
  );  
}  

Обробка завантаження даних Blob із керуванням помилками

Внутрішній підхід Node.js використовує потоки для ефективного використання пам’яті

// 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() після завершення роботи з блобом, щоб звільнити пам’ять і уникнути застарілих посилань.
5. Чи можна захистити URL-адреси blob із закінченням терміну дії?
6. Так, за допомогою Azure Shared Access Signatures (SAS), ви можете створювати URL-адреси, які закінчуються через певний час, забезпечуючи безпечний контроль доступу.
7. Що робити, якщо blob URL-адреси не працюють у мобільних браузерах?
8. Реалізуйте резервні варіанти, наприклад переспрямування за допомогою window.location.href або пропонувати користувачам вручну зберегти файл, якщо URL-адреси blob не підтримуються.
9. Як мені ефективно керувати завантаженнями великих файлів у Node.js?
10. використання readableStreamBody.pipe() для потокової передачі вмісту безпосередньо у відповідь, що запобігає перевантаженню пам’яті та забезпечує плавну передачу файлів.
11. Чи можу я завантажити файли з Azure Blob Storage без використання тимчасових URL-адрес?
12. Так, ви можете налаштувати бекенд-маршрут за допомогою Express і передавати вміст blob безпосередньо клієнту за допомогою blockBlobClient.download().
13. Чому мій завантажений блоб повертає пошкоджені дані?
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 замість завантаження?
22. Встановіть відповідне content-disposition заголовок у Azure Blob Storage, щоб відображати файл у рядку замість примусового завантаження.

Основні висновки з керування завантаженнями Blob:

Ефективна обробка завантажень блобів у a Next.js програма передбачає перетворення двійкових даних у тимчасові URL-адреси за допомогою таких методів, як URL.createObjectURL(). Правильне керування пам’яттю, наприклад відкликання URL-адрес об’єктів, має вирішальне значення, щоб уникнути витоків і проблем із продуктивністю.

Безпека є ще одним ключовим моментом, оскільки тимчасові URL-адреси можна надавати спільно. Впровадження токенів SAS додає контроль доступу з обмеженим часом. Крім того, забезпечення сумісності з веб-переглядачем і забезпечення резервних варіантів для пристроїв, які не підтримують URL-адреси blob-файлів, забезпечує оптимальну взаємодію з користувачем.