File và Blob trong JavaScript: Khác nhau ở đâu và khi nào dùng cái nào?

Khi làm việc với tệp tin trong JavaScript — ví dụ cho người dùng tải ảnh lên, tạo nút download, hay gửi dữ liệu lên server — bạn sẽ gặp hai khái niệm: Blob và File. Chúng nghe có vẻ giống nhau và dễ gây bối rối. Bài này sẽ giải thích thật đơn giản để bạn không bao giờ nhầm lẫn nữa.

Hiểu nhanh trong 1 câu

Blob là một “cục” dữ liệu nhị phân thô. File chính là một Blob, nhưng được gắn thêm tên tệp và ngày sửa đổi.

Nói cách khác: mọi File đều là Blob, nhưng không phải Blob nào cũng là File. File giống như một cái hộp dữ liệu có dán nhãn (“tên gì, sửa lúc nào”), còn Blob là cái hộp không nhãn.

Blob là gì?

Blob (viết tắt của Binary Large Object — đối tượng nhị phân lớn) là một khối dữ liệu nhị phân: có thể là văn bản, ảnh, âm thanh, video… Bạn dùng Blob khi cần xử lý dữ liệu thô ngay trong bộ nhớ trình duyệt.

Hai điểm cần nhớ về Blob:

• Không thể sửa đổi (immutable): Tạo xong là cố định, muốn thay đổi thì phải tạo Blob mới.
• Có 2 thuộc tính quan trọng:
  • size — kích thước, tính bằng byte.
  • type — kiểu MIME, ví dụ text/plain, image/png.

Tạo một Blob

const myBlob = new Blob(['Hello, world!'], { type: 'text/plain' });

console.log(myBlob.size); // 13 (số byte)
console.log(myBlob.type); // "text/plain"

Việc thường làm nhất với Blob: tạo nút tải xuống

Bạn có thể biến một Blob thành một đường link tạm thời bằng URL.createObjectURL(), rồi cho người dùng bấm tải về:

const myBlob = new Blob(['This is a sample text.'], { type: 'text/plain' });

// Tạo URL tạm cho Blob
const url = URL.createObjectURL(myBlob);

// Tạo link tải xuống
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = 'sample.txt'; // tên file khi tải về
downloadLink.textContent = 'Tải file mẫu';

document.body.appendChild(downloadLink);

Mẹo: Sau khi dùng xong, nên gọi URL.revokeObjectURL(url) để giải phóng bộ nhớ.

File là gì?

File đại diện cho một tệp tin thật trên máy người dùng. Bạn gặp File nhiều nhất khi người dùng chọn tệp qua ô <input type="file">.

Vì File kế thừa từ Blob nên nó có đủ size và type, cộng thêm vài thuộc tính riêng dành cho tệp:

Đọc nội dung tệp người dùng chọn

Đây là tình huống kinh điển: người dùng chọn một file text, ta đọc và hiển thị nội dung bằng FileReader:

<input type="file" id="fileInput" />
<pre id="fileContent"></pre>

<script>
  const fileInput = document.getElementById('fileInput');
  const fileContent = document.getElementById('fileContent');

  fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0]; // lấy file đầu tiên

    if (file) {
      const reader = new FileReader();

      reader.onload = (e) => {
        fileContent.textContent = e.target.result; // hiển thị nội dung
      };

      reader.readAsText(file); // đọc dưới dạng văn bản
    }
  });
</script>

So sánh trực tiếp

Khi nào dùng cái nào?

• Dùng Blob khi bạn tự tạo dữ liệu trong code: sinh file để tải xuống, ghép dữ liệu nhị phân, gửi lên server qua fetch/XMLHttpRequest.
• Dùng File khi bạn làm việc với tệp do người dùng chọn: upload ảnh, đọc nội dung file, kiểm tra tên/kích thước trước khi gửi lên server.

Ví dụ dùng cả hai

// --- Blob: dữ liệu mình tự tạo ---
const myBlob = new Blob(['Hello, world!'], { type: 'text/plain' });
const blobUrl = URL.createObjectURL(myBlob);
console.log(blobUrl); // link tạm tới blob

// --- File: dữ liệu từ người dùng ---
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  console.log(file.name); // tên file
  console.log(file.size); // kích thước file
});

Tóm lại

File chỉ là một phiên bản “có nhãn” của Blob. Nhớ đơn giản thế này:

• Cần làm việc với dữ liệu nhị phân chung chung → dùng Blob.
• Cần làm việc với tệp người dùng chọn → dùng File.

Vì File kế thừa từ Blob, nên bất cứ chỗ nào nhận Blob (như fetch, URL.createObjectURL, FileReader) đều nhận luôn được File.