在处理文件时经常看见blob和buffer两个概念，今天总结下

  • File：浏览器，Blob的子类，input组件读文件得到的数据类型
  • Blob: 浏览器，用于保存文件的二进制对象
  • Buffer：Node，
  • ArrayBuffer：浏览器和Node，内存中保存二进制数据，可通过TypedArray来

Blob

MDN定义：

  1. Blob对象表示一个不可变、原始数据的类文件对象；
  2. Blob的数据可以按文本或二进制的格式进行读取；
  3. 也可以转换成 ReadableStream 来用于数据操作；

File类型基于blob，所以file类型的input组件，即使用blob来传递数据

转成Data URL

Blob转换成url，可用于预览文件，有两个方法：

  1. URL.createObjectUrl(Blob)，同步的
  2. new FileReader().readAsDataURL(Blob)，异步的

转成ArrayBuffer

暂时不知道有啥用
new FileReader().readAsArrayBuffer(Blob)

转成Text

可用于读文本文件入内存中，如txt、json等
new FileReader().readAsText(Blob)

1.如何展示本地上传的图片
2.如何裁剪本地上传的图片
3.如何上传本地图片至服务器
4.如何从服务器获取图片

TypedArray

表示

ArrayBuffer

如从OSS API上获取到的是Unit8Array格式的数据。保存在内存中。不能单独使用，通过TypedArray.buffer才能使用，

Uint32Array
Float32Array
Float64Array
数据数组，xview中three和point cloud文件用到了

ArrayBuffer转Blob

  1. new Blob([typedArray.buffer])    // 注意是个数组哦

Buffer

Buffer是Node提供的原生对象，浏览器没有

Buffer.from

将object、string、arraybuffer、buffer、array转换成buffer

关系

  • ArrayBuffer是最底层的，内存中保存二进制数据。