Blob详解

最新推荐文章于 2025-10-21 16:51:49 发布

原创最新推荐文章于 2025-10-21 16:51:49 发布 · 2.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

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的字节为10
        console.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>