blob对应Java类型是什么 blob数据类型js_blob对应Java类型是什么

Blob

Blob 全称为 binary large object ,即二进制大对象。blob对象本质上是js中的一个对象,里面可以储存大量的二进制编码格式的数据。Blob 对象一个不可修改,从Blob中读取内容的唯一方法是使用 FileReader。

① 创建

new Blob(array,options)

其有两个参数:

array:由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成的,将会被放进 Blob;

options:它可能会指定如下两个属性

               type:默认值为 "",表示将会被放入到 blob 中的数组内容的 MIME 类型。

               endings:默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入,不常用。

 

blob对应Java类型是什么 blob数据类型js_servlet_02

演示:

blob对应Java类型是什么 blob数据类型js_javascript_03

 这个 blob 对象上有两个属性:


size:Blob对象中所包含数据的大小(字节);

type:字符串,认为该Blob对象所包含的 MIME 类型。如果类型未知,则为空字符串。

②分片

Blob 对象内置了 slice() 方法用来将 blob 对象分片


其有三个参数:

start:设置切片的起点,即切片开始位置。默认值为 0,这意味着切片应该从第一个字节开始;

end:设置切片的结束点,会对该位置之前的数据进行切片。默认值为blob.size;

contentType:设置新 blob 的 MIME 类型。如果省略 type,则默认为 blob 的原始值。

blob对应Java类型是什么 blob数据类型js_javascript_04

File

File 对象是特殊类型的 Blob,


在 JavaScript 中,主要有两种方法来获取 File 对象:

(1)<input> 元素上选择文件后返回的 FileList 对象;

(2)文件拖放操作生成的 DataTransfer 对象;

演示一下:

blob对应Java类型是什么 blob数据类型js_java_05

blob对应Java类型是什么 blob数据类型js_字符串_06

 

blob对应Java类型是什么 blob数据类型js_javascript_07

Filereader

通过上面我都知道了blob是不可修改也是无法读取里面的内容的。无法读取里面的内容肯定是不可行的。

所以Filereader就提供了读取blob里面内容的方法

blob对应Java类型是什么 blob数据类型js_blob对应Java类型是什么_08

 

blob对应Java类型是什么 blob数据类型js_字符串_09

这里演示一下:

①将文件读取为base64

blob对应Java类型是什么 blob数据类型js_servlet_10

 ②将存入的字符串的blob对象,读出来里面的内容

blob对应Java类型是什么 blob数据类型js_blob对应Java类型是什么_11

 ArrayBuffer

我们可以把它理解为特殊的数组,特殊在哪里呢?

ArrayBuffer 本身就是一个黑盒,不能直接读写所存储的数据,需要借助以下视图对象来读写

TypedArray只是一个概念,实际使用的是那9个对象

blob对应Java类型是什么 blob数据类型js_字符串_12

 

blob对应Java类型是什么 blob数据类型js_java_13

①创建buffer

new ArrayBuffer(bytelength)

参数:它接受一个参数,即 bytelength,表示要创建数组缓冲区的大小(以字节为单位。)

blob对应Java类型是什么 blob数据类型js_servlet_14

 ②TypedArray读写buffer

 

blob对应Java类型是什么 blob数据类型js_javascript_15

 ③DataView读写buffer

 

blob对应Java类型是什么 blob数据类型js_java_16

 

blob对应Java类型是什么 blob数据类型js_servlet_17

blob对应Java类型是什么 blob数据类型js_blob对应Java类型是什么_18

Object URL

它是一个用来表示File Object 或Blob Object 的URL

演示一下:

blob对应Java类型是什么 blob数据类型js_servlet_19

base64


在 JavaScript 中,有两个函数被分别用来处理解码和编码 base64 字符串:

  • atob():解码,解码一个 Base64 字符串;
  • btoa():编码,从一个字符串或者二进制数据编码一个 Base64 字符串。

blob对应Java类型是什么 blob数据类型js_javascript_20

主要使用:

①将canvas画布内容生成base64的图片

②将获取的图片文件,生成base64图片【这个在上面的filereader的时候已经演示过了,这里就不演示了】

演示①:


blob对应Java类型是什么 blob数据类型js_java_21

总结: 

1.ArrayBuffer 与 Blob 有啥区别呢?根据 ArrayBuffer 和 Blob 的特性,Blob 作为一个整体文件,适合用于传输;当需要对二进制数据进行操作时(比如要修改某一段数据时),就可以使用 ArrayBuffer。

2.通过ArrayBuffer创建Blob,然后通过FileReader读取里面的内容

blob对应Java类型是什么 blob数据类型js_servlet_22