Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作。
一、构造函数
Blob()构造函数返回一个新的 Blob 对象。blob 的内容由参数blobParts中给出的值串联而成
new Blob(blobParts)
new Blob(blobParts, options?)
blobParts:一个可迭代对象，比如Array，包含 ArrayBuffer、TypedArray、DataView、Blob、字符串或者任意这些元素的混合，这些元素将会被放入 Blob 中。
options:可选参数，是一个对象,有两个键，type表示数据的MIME 类型类型,endings表示如果数据是文本，那么如何解释其中的换行符（\n）。默认值transparent会将换行符复制到 blob 中而不会改变它们。要将换行符转换为主机系统的本地约定，请指定值native。
let blob = new Blob(['hello world'],{type:'text/plain'})console.log(blob)
二、实例属性
size:返回Blob或File的字节数
type:返回Blob或File的类型
三、实例方法
arrayBuffer():返回一个promise,其会兑现一个包含 blob 二进制数据内容的ArrayBuffer
bytes():返回一个Promise，该 Promise兑现为一个包含 blob 内容的字节数组的Uint8Array
slice():创建并返回一个新的Blob对象，该对象包含调用它的 blob 的子集中的数据
slice()
slice(start)
slice(start, end)
slice(start, end, contentType)
start:这个参数代表 Blob 里的第一个会被拷贝进新的 Blob 的字节的索引。如果你传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。例如，-10 将会是 Blob 的倒数第十个字节。它的默认值是 0。如果你传入的 start 的长度大于源 Blob 的长度，那么返回的将会是一个长度为 0 并且不包含任何数据的一个 Blob 对象。end:这个参数代表 Blob 里的第一个不会被拷贝进新的 Blob 的字节的索引（换句话说，这个索引的字节不会被拷贝）。如果你传入了一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说，-10 将会是 Blob 的倒数第十个字节。它的默认值就是它的原始长度 size。contentType:给新的Blob赋予一个新的内容类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空字符串。
stream():返回一个ReadableStream对象，读取它将返回包含在 Blob 中的数据
text():返回一个Promise，其会兑现一个包含 blob 内容的UTF-8格式的字符串
五、File对象
File对象属于Blob的子类，更适用于系统文件，多出来几个实例属性,构造函数多了一个文件名的参数
1.构造函数
new File(fileBits, fileName)
new File(fileBits, fileName, options)
2.实例属性（只列举比Blod多出来的几个）
lastModified:只读属性提供文件的上次修改日期
name:只读属性返回由 File 对象表示的文件的名称
webkitRelativePath:只读属性，包含USVString，它规定了文件的路径
六、如何修改arrayBuffer
使用DataView可以进行修改
let dataView = new DataView(arrayBuffer);console.log(dataView.getUint8(1)); //返回下标为1的字节dataView.setUint8(0,10); //设置小标为0的字节为10console.log(dataView);
七、showOpenFilePicker
用于显示一个文件选择器，以允许用户选择一个或多个文件并返回这些文件的句柄，选择文件不再局限于input标签了
const pickerOpts = {types: [{description: "Images", //允许的文件类型类别的可选描述。默认为空字符串,没啥实际意义accept: {//可以选择的文件类型，前面的键只能是MIME类型，但是很明显image/abc应该不是，竟然也能成功"image/abc": [".png", ".gif", ".jpeg", ".jpg"], },},],excludeAcceptAllOption: true, //是否排除选择所有文件，默认为false,为true时，禁止选择所有文件multiple: false, //是否可以多选};let fileList = await showOpenFilePicker(pickerOpts);console.log(fileList);let file = await fileList[0].getFile(); //通过getFile方法获取的File对象console.log(file);
八、showSaveFilePicker()
用于显示一个文件选择器，以允许用户保存一个文件。可以选择一个已有文件覆盖保存，也可以输入名字新建一个文件。
let fileHandle = await showSaveFilePicker({types: [{description: "text",accept: {"text/plain": [".txt"], //要保存的文件类型},},],});console.log(fileHandle);let writable = await fileHandle.createWritable(); //创建写入流await writable.write("hello world"); //写入文件内容await writable.close(); //必须执行关闭，文件才能有内容}
九、showDirectoryPicker
用于显示一个目录选择器，以允许用户选择一个目录
直接上代码，选择一个文件夹，获取它的文件结构
const openFile = async () => {let directoryHandel = await showDirectoryPicker(); //获取文件夹句柄let fileList = await getFileList(directoryHandel);treeData.value = fileList;console.log(fileList);
}
const getFileList = async (directoryHandel: FileSystemDirectoryHandle) => {let fileList = [];//获取文件迭代器，可获取当前文件夹下面的所有文件和子文件夹，仅一层，不包括子文件夹里面的文件let file = await directoryHandel.entries(); for await (let item of file) {if (item[1].kind === 'file') { fileList.push({label: item[0],children: [],fileHandel: item[1]});} else {let file = await getFileList(item[1]); //如果是文件夹，递归获取子文件夹下面的文件fileList.push({label: item[0],children: file,fileHandel: item[1]});}}return fileList;
}
十、实现打开文件，保存文件，另存为文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button id="openFile">打开文件</button><button id="saveFile">保存文件</button><button id="saveAsFile">另存为文件</button><textarea name="" id="textarea"></textarea></body><script>let textarea = document.getElementById("textarea");let fileHandle; //用于保存文件的句柄const save = async (fileHandle) => { //保存文件let writable = await fileHandle.createWritable(); //创建写入流await writable.write(textarea.value); //写入文件内容await writable.close(); //必须执行关闭，文件才能有内容};// 打开文件let openFile = document.getElementById("openFile");openFile.onclick = async function () {const pickerOpts = {types: [{description: "text", //允许的文件类型类别的可选描述。默认为空字符串,没啥实际意义accept: {//可以选择的文件类型，前面的键只能是MIME类型，但是很明显image/abc应该不是，竟然也能成功"text/abc": [".txt"],},},],excludeAcceptAllOption: true, //是否排除选择所有文件，默认为false,为true时，禁止选择所有文件multiple: false, //是否可以多选};let fileList = await showOpenFilePicker(pickerOpts);console.log(fileList);fileHandle = fileList[0]; //将打开的文件句柄保存起来let file = await fileList[0].getFile(); //通过getFile方法获取的File对象textarea.value = await file.text();};// 保存文件let saveFile = document.getElementById("saveFile");saveFile.onclick = async function () {if (!fileHandle) {fileHandle = await showSaveFilePicker({types: [{description: "text",accept: {"text/plain": [".txt"],},},],});console.log(fileHandle);}save(fileHandle);}//文件另存为let saveAsFile = document.getElementById("saveAsFile");saveAsFile.onclick = async function () {let fileHandle = await showSaveFilePicker({types: [{description: "text",accept: {"text/plain": [".txt"], //要保存的文件类型},},],});console.log(fileHandle);save(fileHandle);};</script>
</html>
