一、Blob
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream
来用于数据操作。
构造方法
new Blob(blobParts)
new Blob(blobParts,options)
- blobParts是一个可迭代对象（就是能循环的） ，比如数组。
- options一个可以指定type（文件类型）的对象。
示例
// 一个包含单个字符串的数组
const blobParts = ['<q id="a"><span id="b">hey!</span></q>'];
// 得到 blob
const blob = new Blob(blobParts, { type: "text/html" }); 实例属性
- size：Blob对象中所包含数据的大小字节
- type：一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串
实例方法
1、arrayBuffer()：用于将 Blob 对象转换为 ArrayBuffer 对象。
let blob = new Blob(['Hello World'], {type: 'text/plain'});
blob.arrayBuffer().then(arrayBuffer => {
let text = new TextDecoder().decode(arrayBuffer);
console.log(text); // 输出: Hello World
});
2、slice()：分割Blob对象
slice()
slice(start)
slice(start, end)
slice(start, end, contentType)
示例： 假设有一个名为 file 的 File 对象，代表一个名为 example.txt 的文本文件。
let slicedFile = file.slice(0, 100, "text/plain");
console.log(slicedFile); // 输出 Blob 对象
// 使用 FileReader 读取子文件内容
let reader = new FileReader();
reader.onload = function(event) {
let slicedContent = event.target.result;
console.log(slicedContent); // 输出子文件的内容
};
reader.readAsText(slicedFile);
3.stream()：返回一个ReadableStream对象，读取它将返回包含在 Blob 中的数据。
function blobToStream(blob) {
const stream = new ReadableStream({
start(controller) {
const reader = new FileReader();
reader.onload = function() {
controller.enqueue(new Uint8Array(reader.result));
controller.close();
};
reader.readAsArrayBuffer(blob);
}
});
return stream;
}
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const stream = blobToStream(blob);
4.text()：返回一个promise
// 创建一个 Blob 对象
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
// 使用 text() 方法读取 Blob 对象的文本内容
blob.text()
.then(text => {
console.log(text); // 输出: "Hello, world!"
})
.catch(error => {
console.error(error); // 输出解析错误的错误信息
});
二、File
File对象通常从用户使用<input>元素选择文件返回的FileList对象中检索，或者从拖放操作返回的DataTransfer对象中检索。File对象是一种特定类型的Blob（继承）。
构造方法
new File(fileBits, fileName)
new File(fileBits, fileName, options)
- fileBits：一个可迭代对象；
- fileName：文件名或文件路径的字符串；
- options：type（文件类型）和lastModified（最后一次修改时间）
实例属性
- lastModified：返回文件的最后修改时间；
- lastModifiedDate：返回File对象引用的文件的最后修改时间的Data
- name：文件名
- webkitRelativePath：返回File对象相对于URL的路径
实例方法
同Blob
三、FileList
FileList接口表示由HTML<input>元素的files属性返回的该类型的对象，示例：
HTML
<input id="myfiles" multiple type="file" />
<pre class="output">选定的文件：</pre>
JS
const output = document.querySelector(".output");
const fileInput = document.querySelector("#myfiles");
fileInput.addEventListener("change", () => {
for (const file of fileInput.files) {
output.innerText += `\n${file.name}`;
}
});
注意：input标签中的multiple的作用是文件多选，如果只支持但文件上传，则可以取files[0]。
四、FileReader
FileReader接口允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。文件对象可以从用户使用的<input>元素选择文件而返回的fileList对象中获取，或者从拖放操作的DataTransfer对象中获取。
构造方法
new fileReader()
实例属性
- error：表示在读取文件时发生的错误；
- readyState：表示FileReader状态的数字，取值为0（EMPTY-还没有加载任何数据）、1（LOADING-数据正在被加载）、2（DONE-已完成全部的读取请求）；
- result：文件的内容（字符串或ArrayBuffer对象）
实例方法
- abort()：中止读取操作，在返回时，readyState属性为DOME；
- readAsArrayBuffer()：传入一个Blob对象，读取后result中包含一个ArrayBuffer对象。
- readAsBinaryString()：传入一个Blob对象，读取后result中包含一个原始二进制数据的字符串。
- readAsDataURL()：传入一个Blob对象，读取后result中包含一个图片路径（可以做图片的预览src的值）。
- readAsText()：可以只传入Blob，也可以传入Blob和一个数据的编码的字符串，返回一段文本。
事件
- abort：当读取被中止时触发；
- error：当读取由于错误而失败时触发；
- load：读取成功完成时触发；
- loadend：读取完成时触发，无论成功与否；
- loadstart：读取开始时触发；
- progress：读取数据时定期触发；
常用方法实例：
function printFile(file) {
const reader = new FileReader();
reader.onload = (evt) => {
console.log(evt.target.result);
};
reader.readAsText(file);
}
