EnlightenCode

JavaScript 文件对象详解 📁 ​

1. Blob 对象 🔵 ​

Blob (Binary Large Object) 对象是 JavaScript 中表示二进制数据的基础对象，它可以存储各种类型的数据。File 对象是继承自 Blob 的特殊类型。

1.1 Blob 构造函数 ​

javascript
new Blob(array[, options])

参数说明：

  • array: 由 ArrayBuffer、ArrayBufferView、Blob、String 等对象构成的数组
  • options: 可选配置对象
    • type: MIME 类型，默认为 ""
    • endings: 行结束符处理方式（"native" 或 "transparent"）

💡 提示：常见的 MIME 类型包括：

  • text/plain: 纯文本
  • text/html: HTML 文件
  • image/jpeg: JPEG 图片
  • application/json: JSON 数据
  • application/pdf: PDF 文件

1.2 实用示例 ​

javascript
// 创建文本 Blob
const textBlob = new Blob(['Hello, World!'], { type: 'text/plain' });

// 创建 JSON Blob
const jsonBlob = new Blob([JSON.stringify({ hello: 'world' })], 
  { type: 'application/json' });

// 使用 slice 方法
const partialBlob = textBlob.slice(0, 5, 'text/plain'); // "Hello"

2. File 对象 📄 ​

File 对象是特殊类型的 Blob，通常来自于文件选择器或拖放操作。

2.1 获取 File 对象 ​

javascript
// 通过 input 元素
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  console.log(`📝 文件名: ${file.name}`);
  console.log(`📊 大小: ${file.size} bytes`);
  console.log(`🏷️ 类型: ${file.type}`);
});

// 通过构造函数
const file = new File(['文件内容'], 'test.txt', {
  type: 'text/plain',
  lastModified: Date.now()
});

3. FileReader 对象 📖 ​

FileReader 提供了异步读取文件内容的能力。

3.1 主要方法 ​

javascript
const reader = new FileReader();

// 读取为 Data URL (Base64)
reader.readAsDataURL(file);

// 读取为文本
reader.readAsText(file, 'UTF-8');

// 读取为 ArrayBuffer
reader.readAsArrayBuffer(file);

3.2 实用示例 ​

javascript
function readFileAsText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.onerror = (e) => reject(e);
    reader.readAsText(file);
  });
}

// 使用示例
async function handleFile(file) {
  try {
    const content = await readFileAsText(file);
    console.log('📄 文件内容:', content);
  } catch (error) {
    console.error('❌ 读取失败:', error);
  }
}

4. 实用转换工具 🛠️ ​

4.1 Blob/File 转 Base64 ​

javascript
async function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

4.2 Base64 转 Blob ​

javascript
function base64ToBlob(base64, type = 'application/octet-stream') {
  const binStr = atob(base64.split(',')[1]);
  const arr = new Uint8Array(binStr.length);
  for (let i = 0; i < binStr.length; i++) {
    arr[i] = binStr.charCodeAt(i);
  }
  return new Blob([arr], { type });
}

5. 最佳实践与注意事项 ⚠️ ​

  1. 内存管理

    • 处理大文件时要注意内存使用
    • 使用完 FileReader 后释放引用
    • 考虑使用 URL.createObjectURL() 代替 Base64

  2. 安全考虑

    • 始终验证文件类型和大小
    • 注意 XSS 风险，特别是处理 HTML 内容时

  3. 性能优化

    • 大文件考虑分片上传
    • 使用 URL.createObjectURL() 代替 Base64 可以提升性能
javascript
// 示例：文件类型验证
function validateFile(file) {
  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
  const maxSize = 5 * 1024 * 1024; // 5MB
  
  if (!allowedTypes.includes(file.type)) {
    throw new Error('❌ 不支持的文件类型');
  }
  
  if (file.size > maxSize) {
    throw new Error('❌ 文件过大');
  }
  
  return true;
}

💡 提示：现代浏览器还支持更多强大的 API，如 File System Access API 和 Streams API，可以用于处理更复杂的文件操作场景。