1.Blob是什么

Blob（Binary Large Object）对象用于表示不可变的、原始数据的类文件对象。它的内容可以包含任何类型的数据：文本、图片、音频、视频等。Blob 对象通常用于在客户端存储文件或从网络上传输文件。
它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

2.Blob用法

Blob构造函数

new Blob(array,options)

• array: 一个包含 ArrayBuffer、TypedArray（如 Int8Array）、Blob 或字符串等元素的数组，这些元素将被组合成一个新的 Blob
• options:可选
  ○ type：一个字符串，指定Blob的MIME类型，默认是空字符串
  ○ endings：在处理文本时，可以指定为 “transparent”（默认值）或 “native”。此选项仅适用于包含换行符的文本内容，指定了如何解释 \n 和 \r\n 换行序列

ArrayBuffer、TypedArray 和 Int8Array 是 什么

实例属性

• Blob.size
  • Blob 对象中所包含数据的大小（字节）
• Blob.type
  • 一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串

Blob方法

slice方法

slice([start[, end[, contentType]]])：创建并返回一个新的 Blob，该 Blob 包含了源 Blob 中从 start 到 end（不包括 end）的数据副本。如果指定了 contentType 参数，则新 Blob 的 MIME 类型会设置为此值

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const slicedBlob = blob.slice(0, 5); // 创建包含 "Hello" 的新 Blob

text方法

text()方法会返回一个Promise,返回一个包含 blob 内容的 UTF-8 格式的字符串

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const textBlob = blob.text().then(console.log()); // 输出：Hello,world!

示例1：字符串 Blob

let BlobParts = ['<h1>这是一个Blob数据</h1>']; 
let blob = new Blob(BlobParts, {type : 'text/html', endings: "transparent"}); console.log(blob.size);
// 输出: 19 
console.log(blob.type);
// 输出: text/html 

示例2：数组和字符串 Blob

let hello = new Uint8Array([72, 101, 108, 108, 111]); 
let blob = new Blob([hello, ' ', 'webRookie'], {type: 'text/plain'});console.log(blob.size);
// 输出: 15 
console.log(blob.type);
// 输出: text/html 

示例3：从文件输入创建

<input type="file" id="fileInput">
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {const file = event.target.files[0]; // File 是 Blob 的子类if (file) {console.log(file); // 直接使用 file 作为 Blob}
});
</script>

3.使用场景

1.创建 Blob 并生成 URL，下载文件

const text = 'Hello, world!';
const blob = new Blob([text], { type: 'text/plain' });
const url = window.URL.createObjectURL(blob);// 使用生成的 URL 预览或下载文件
const a = document.createElement('a');
a.style.display = "none";
a.href = url;
a.download = 'hello.txt';
// a.setAttribute("download","hello.txt")
document.body.appendChild(a);
a.click();// 清理
window.URL.revokeObjectURL(url);
document.body.removeChild(a);

2.文件上传

<input type="file" id="fileInput">
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {const file = event.target.files[0];const formData = new FormData();formData.append('file', file);fetch('/upload', {method: 'POST',body: formData,}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));
});
</script>

3.切片上传

待定

3.Blob用于URL

Blob 对象可以通过 window.URL.createObjectURL() 方法转换为一个临时的 URL，这个 URL 可以用于立即引用 Blob 中的数据，而无需将数据上传到服务器或存储在文件系统中。这种方式非常适合于在线预览文件、处理多媒体内容以及创建下载链接等场景。
基本步骤

1. 创建 Blob 对象：可以是通过构造函数直接创建，也可以从其他 API（如 fetch 或 FileReader）获取。
2. 生成对象 URL：使用 URL.createObjectURL(blob) 创建一个指向 Blob 的 URL。
3. 使用对象 URL：将生成的 URL 应用到<img>、<a>、<iframe>、<video>等元素上，以便可以直接展示或操作 Blob 数据。
4. 释放对象 URL：当不再需要该 URL 时，调用 URL.revokeObjectURL(url) 来释放内存资源

在线预览PDF文件

<input type="file" id="pdfInput">
<script>
document.getElementById('pdfInput').addEventListener('change', function(event) {const file = event.target.files[0];if (file) {const iframe = document.createElement('iframe');iframe.src = window.URL.createObjectURL(file);iframe.style.width = '100%';iframe.style.height = '500px';document.body.appendChild(iframe);// 清理iframe.onload = () => window.URL.revokeObjectURL(iframe.src);}
});
</script>

4.Blob 转换为 Base64

将 Blob 转换为 Base64 编码的字符串需要将二进制数据嵌入到 HTML 或 CSS 中时。转换过程通常涉及到使用 FileReader 对象的 readAsDataURL() 方法。这个方法会读取文件的内容，并返回一个包含 Base64 编码的数据 URL。

基本步骤

1. 创建 FileReader 实例。
2. 监听 load 事件：当文件读取完成时触发，可以在事件处理程序中获取结果。
3. 调用 readAsDataURL() 方法：开始读取 Blob，完成后会触发 load 事件。
4. 处理结果：从 FileReader 的 result 属性中提取 Base64 编码的字符串。

function blobToBase64(blob) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onloadend = () => {// result 包含 data URL，格式为 "data:[<mediatype>][;base64],<data>"resolve(reader.result.split(',')[1]); // 只取 base64 编码部分};reader.onerror = () => {reject(new Error('Error reading the Blob as Base64.'));};reader.readAsDataURL(blob);});
}const text = 'Hello, world!';
const blob = new Blob([text], { type: 'text/plain' });blobToBase64(blob).then(base64String => {console.log('Base64 String:', base64String);
}).catch(error => {console.error('Error converting Blob to Base64:', error);
});