Daha sonra, Azure Blob Storage.js için geçici indirilebilir bir URL oluşturmak üzere JavaScript'i nasıl kullanacağınızı öğrenin.

Next.js ile Azure'da Blob İndirmeleri için Geçici URL'ler Oluşturma

Azure SDK ve Blob Nesne URL'lerini kullanan ön uç JavaScript çözümü

// 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 Verilerini İndirmeyi Hata Yönetimiyle İşleme

Verimli bellek kullanımı için Akışları kullanan arka uç Node.js yaklaşımı

// 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 İndirme İşlevselliği için Birim Testleri

Doğru indirme davranışını sağlamak için Jest kullanarak birim testi

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

Next.js'deki Blob URL Sorunlarına İlişkin Yaygın Sorular ve Çözümler

1. Blob URL'im neden doğru resmi göstermiyor?
2. Kullandığınızdan emin olun URL.createObjectURL() doğru blob nesnesinde olduğundan ve blobun içerik türünün Azure Blob Depolama'da doğru şekilde ayarlandığından emin olun.
3. Bellek sızıntılarını önlemek için bir blob URL'sini nasıl iptal edebilirim?
4. Kullanmak URL.revokeObjectURL() belleği boşaltmak ve eski referanslardan kaçınmak için blob ile işiniz bittikten sonra.
5. Süresi dolmuş blob URL'lerini güvence altına almak mümkün mü?
6. Evet, Azure'ı kullanıyorum Shared Access Signatures (SAS)ile, belirli bir süre sonra süresi dolan URL'ler oluşturarak güvenli erişim kontrolü sağlayabilirsiniz.
7. Blob URL'leri mobil tarayıcılarda çalışmıyorsa ne yapmam gerekir?
8. Kullanarak yeniden yönlendirme gibi geri dönüşleri uygulayın window.location.href veya blob URL'leri desteklenmiyorsa kullanıcılardan dosyayı manuel olarak kaydetmelerinin istenmesi.
9. Node.js'de büyük dosya indirme işlemlerini verimli bir şekilde nasıl yönetirim?
10. Kullanmak readableStreamBody.pipe() içeriğin doğrudan yanıta aktarılmasını sağlar; bu da belleğin aşırı yüklenmesini önler ve sorunsuz dosya aktarımı sağlar.
11. Geçici URL'ler kullanmadan Azure Blob Depolama'dan dosya indirebilir miyim?
12. Evet, Express ile bir arka uç rotası ayarlayabilir ve blob içeriğini doğrudan istemciye aktarabilirsiniz. blockBlobClient.download().
13. Blob indirmem neden bozuk veriler döndürüyor?
14. Blobun kodlamasının ve içerik türünün Azure'da doğru şekilde yapılandırılıp yapılandırılmadığını kontrol edin. Ayrıca, yanıt gövdesinin kullanılarak doğru şekilde ayrıştırıldığından emin olun. response.blobBody.
15. Blob indirmelerini test etmenin en iyi yolu nedir?
16. İndirme isteklerini simüle etmek ve indirme mantığınızın çeşitli koşullar altında doğru şekilde çalıştığını doğrulamak için Jest ve Supertest'i kullanın.
17. Blob URL'leri birden çok kez yeniden kullanılabilir mi?
18. Evet, ancak tarayıcı oturumlarının bu URL'leri önbelleğe alabileceğini unutmayın. Kullanmak URL.revokeObjectURL() Belleği serbest bırakmak ve sorunları önlemek için.
19. Bir blob URL'sini yeni bir sekmede nasıl açarım?
20. Kullanmak window.open() yeni bir sekmede açmak için blob URL'si ile. Bu işe yaramazsa tarayıcı ayarlarının açılır pencerelere izin verdiğinden emin olun.
21. Blob içeriğini indirmek yerine satır içi olarak nasıl görüntülerim?
22. Uygun olanı ayarlayın content-disposition Dosyayı indirmeye zorlamak yerine satır içi görüntülemek için Azure Blob Depolama'da başlık.

Blob İndirmelerini Yönetmeyle İlgili Önemli Çıkarımlar:

Blob indirmelerini verimli bir şekilde yönetme Next.js uygulaması, ikili verileri aşağıdaki yöntemleri kullanarak geçici URL'lere dönüştürmeyi içerir: URL.createObjectURL(). Nesne URL'lerinin iptal edilmesi gibi uygun bellek yönetimi, sızıntıları ve performans sorunlarını önlemek açısından çok önemlidir.

Geçici URL'ler paylaşılabildiğinden güvenlik bir diğer önemli husustur. SAS belirteçlerinin uygulanması, zaman sınırlı erişim kontrolü sağlar. Ek olarak, tarayıcı uyumluluğunun sağlanması ve blob URL'lerini desteklemeyen cihazlar için yedeklerin sağlanması, en iyi kullanıcı deneyimini sağlar.