JavaScript blob nedir?

Mehmet · Dün 21:08 da

JavaScript blob nedir?

JavaScript’te Blob, metin, resim, ses, video veya başka ikili verileri tek bir veri nesnesi olarak tutan, değiştirilemez bir yapıdır. Tarayıcıda kullanıcıdan alınan dosyayı işlemek, oluşturulan içeriği indirmek, önizlemek veya bir sunucuya göndermek için kullanılır. Blob, dosya sistemi yolu değil, ham bayt verisine ve isteğe bağlı MIME türüne erişim sağlayan nesnedir. File ise Blob'un dosya adı ve son değiştirilme zamanı gibi bilgiler taşıyan özel biçimidir.

Blob nasıl çalışır?

Bir Blob oluşturulurken veri parçaları dizi olarak verilir. Bu parçalar metin, başka Blob nesneleri veya ikili veri içeren yapılar olabilir. İkinci parametrede type belirtilirse verinin türü blob.type üzerinden okunabilir; örneğin text/plain veya image/png. Boyut blob.size ile bayt cinsinden öğrenilir.

Blob değiştirilemez. İçeriğini sonradan düzenlemek yerine yeni bir Blob oluşturulur. Blob’un içeriğini JavaScript değişkeni gibi doğrudan ekrana yazdırmak yerine text(), arrayBuffer() veya uygun bir dosya okuma yöntemiyle okunur.

Bir Blob’u tarayıcıda göstermek veya indirme bağlantısına bağlamak için geçici bir blob URL’si üretilebilir. Bu URL, verinin kendisi değildir; tarayıcının oluşturduğu Blob’a erişim sağlayan geçici bir başvurudur. İş bitince URL.revokeObjectURL() çağrılarak bu başvuru serbest bırakılmalıdır.

Çalışan küçük örnek: metni bayt olarak inceleme

Modern tarayıcının geliştirici konsolunda aşağıdaki JavaScript'i çalıştırabilirsiniz. Ağ isteği veya indirme başlatmaz; oluşturulan Blob'u metin ve ikili tampon olarak okur.

Kod:

const veri = new Blob(
  ['Merhaba Dünya'],
  { type: 'text/plain;charset=utf-8' }
);

async function incele() {
  const metin = await veri.text();
  const tampon = await veri.arrayBuffer();
  console.log(metin);
  console.log(veri.size, tampon.byteLength, veri.type);
}

incele().catch(console.error);

Beklenen metin Merhaba Dünya'dır. UTF-8 içeriğin boyutu 14 bayt, tampon uzunluğu da 14'tür; karakter sayısıyla bayt sayısı her zaman aynı değildir. Blob'un MIME türü metin olarak verilmiştir; bu bilgi bir dosya biçimi dönüştürme işlemi yapmaz.

Bu örnek URL oluşturmaz. İndirme veya önizlemede object URL kullanırsanız, kullanıcı onu kullanmayı bitirmeden iptal etmeyin. Örneğin tıklanabilir bir indirme bağlantısının URL'sini hemen revoke etmek işlemi bozabilir. Bağlantı kaldırıldığında veya önizleme artık kullanılmadığında temizleyin.

Blob, File ve ArrayBuffer farkı

Bu türleri aynı şey gibi kullanmak, özellikle dosya yükleme ve ikili veri işleme sırasında hataya yol açar. Temel seçim şu şekilde yapılabilir:

Yapı	Temel amacı	Ne zaman seçilir?
Blob	Ham veriyi parça ve tür bilgisiyle tutmak	Önizleme, indirme veya veri gönderme gerektiğinde
File	Blob’un dosya adı ve son değiştirilme zamanı olan biçimi	Kullanıcı seçimiyle gelen dosyayla çalışırken
ArrayBuffer	İkili verinin bellekteki ham tamponu	Bayt düzeyinde okuma veya dönüştürme gerektiğinde

Örneğin kullanıcı input type="file" ile bir dosya seçtiğinde elde edilen File nesnesi, Blob gibi okunabilir ve birçok Blob kabul eden API’ye verilebilir. Dosyanın adını korumak önemli değilse yeni bir Blob yeterlidir. Baytları tek tek incelemeniz gerekiyorsa Blob’u arrayBuffer() ile ArrayBuffer’a dönüştürmek daha uygundur.

Uygulamada doğru kararlar

İçeriğin türünü belirleyin. Metin için text/plain, JSON için application/json, görsel için ilgili görsel MIME türünü kullanın.
Blob’u nerede kullanacağınızı seçin. İndirme veya önizleme için URL.createObjectURL(blob), sunucuya yükleme için çoğunlukla FormData ve fetch() uygundur.
Blob URL’sinin ömrünü yönetin. Görsel veya video gibi bir öğe artık kullanılmayacaksa URL.revokeObjectURL() çağırın.
İçeriği değiştirmek istiyorsanız mevcut Blob’u değiştirmeye çalışmayın; değiştirilmiş parçalarla yeni bir Blob üretin.

Sık yapılan hatalar

Blob’u normal metin değişkeni sanıp doğrudan birleştirmeye çalışmak doğru değildir. Metin gerekiyorsa await blob.text() kullanın. Blob URL’sini kalıcı dosya adresi gibi saklamak da doğru değildir; bu adres geçici kullanım içindir. Ayrıca type değerini belirtmek, içeriği otomatik olarak o biçime dönüştürmez. Örneğin düz metni image/png olarak etiketlemek onu PNG dosyasına çevirmez; yalnızca tür bilgisini yanlış bildirir.

Sık sorulan sorular

Blob verisi sunucuya doğrudan gönderilebilir mi?

Evet. Blob, uygun bir istek gövdesi olarak gönderilebilir veya FormData içine eklenebilir. Sunucunun beklediği içerik türünü ve dosya adını ayrıca doğru biçimde iletmeniz gerekir.

Blob ile Base64 aynı mıdır?

Hayır. Blob ikili veriyi nesne olarak tutar; Base64 ise verinin metin biçiminde kodlanmış hâlidir. Sadece bir API özellikle Base64 istiyorsa dönüştürme yapmak gerekir; aksi durumda Blob genellikle daha doğrudan bir seçimdir.

JavaScript blob nedir?

Mehmet