各种数据类型的 Blob 对象以及使用场景

创建Blob数据

在 JavaScript 中,您可以使用 Blob 对象来生成各种数据类型的 Blob 对象。以下是一些示例:

// 字符串
const content = 'Hello, World!';
const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });

// 数组
const data = [1, 2, 3, 4, 5];
const blob = new Blob([data], { type: 'application/octet-stream' });

// Uint8Array
const uint8Array = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f]);
const blob = new Blob([uint8Array], { type: 'application/octet-stream' });

// ArrayBuffer
const buffer = new ArrayBuffer(8);
const view = new Uint32Array(buffer);
view[0] = 0x48656c6c;
view[1] = 0x6f000000;
const blob = new Blob([buffer], { type: 'application/octet-stream' });

// JSON 对象
const data = { name: 'John Doe', age: 30 };
const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });

// HTML 内容
const html = '<h1>Hello, World!</h1><p>This is an HTML document.</p>';
const blob = new Blob([html], { type: 'text/html;charset=utf-8' });

// Canvas 数据
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.fillRect(0, 0, 100, 100);
canvas.toBlob(blob => {
  // 使用生成的 Blob 对象
}, 'image/png');

Blob 构造函数接受两个参数:

• [content]: 一个数组,包含要转换为 Blob 的数据。在这个例子中,我们只传入了一个字符串 content。
• { type: ‘text/plain;charset=utf-8’ }: 一个对象,包含 Blob 的属性。在这个例子中,我们指定了 Blob 的 MIME 类型为 ‘text/plain;charset=utf-8’。

Blob 对象用于各种用途

• 下载文件

  // 创建一个链接元素
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'example.txt';
  
  // 触发点击事件
  link.click();
  
  // 释放 Blob 对象
  URL.revokeObjectURL(link.href);
  

• 上传文件

  // 创建一个 FormData 对象
  const formData = new FormData();
  formData.append('file', blob, 'example.txt');
  
  // 使用 fetch API 上传文件
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => console.log('File uploaded successfully!'))
  .catch(error => console.error('Error uploading file:', error));
  

• 在 Web 页面上显示

  // 创建一个 URL 对象
  const objectURL = URL.createObjectURL(blob);
  
  // 将 URL 设置为 img 标签的 src 属性
  const img = document.createElement('img');
  img.src = objectURL;
  document.body.appendChild(img);
  
  // 释放 Blob 对象
  URL.revokeObjectURL(objectURL);