前端JS获取FIle & Blob,以及如何修改二进制文件获取File & Blob Blob的全称是Binary la

获取File & Blob

Blob的全称是Binary large object,也就是二进制大对象,专门用来存储二进制文件的.

获取对象实例主要是通过new Blob和new File的方式创建,Blob的构造函数需要传一个数组参数，其Blog内容由数组参数拼接而成.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">Create Blog & File & ArrayBuffer</button>
    <script>
      document.querySelector(".btn").addEventListener("click", async () => {
        let blog = new Blob(["Hello World!"]);
        let file = new File(["Hello World!"], "hello.txt");
        console.log(blog, file);
      });
    </script>
  </body>
</html>

File对象其实就是Blob的一个包装，在Blob的基础上增加了一些文件名、文件类型、时间戳等信息。

获取ArrayBuffer

最简单的方式是直接调用arrayBuffer的方法. 它的返回值是一个Promise对象，可以加上await直接获取

console.log(await blog.arrayBuffer());
console.log(await file.arrayBuffer());

还有一种通过FileReader的方式获取arrayBuffer.

const fr = new FileReader()
fr.onload = (e) => {
  console.log(fr.result)
  console.log(e.target.result);
}
fr.readAsArrayBuffer(file)

修改ArrayBuffer

我们无法直接修改ArrayBuffer,需要通过DataView来修改

cosnt dataView = new DataView(await blog.arrayBuffer());
console.log(dataView.getUint8(0));
dataView.setUint8(0, 73);