Blob基础详解

Blob是什么

Blob是前端的一个专门用于支持文件操作的二进制对象，将二进制数据存储为一个个体的集合，通常是视频，音乐，或者多媒体文件，目的是为了更好的操作二进制数据对象
创建一个Blob对象

const Blob = new Blob(BlobText, options)
//属性BlobText是一个数组，这里面是Blob对象的数据内容
//属性options，是一个对象，里面有两个参数，Type参数代表MIME类型的字符串，ending参数代表\n的字符串如何被写入，transparent就不变，native就更改为适合宿主操作系统的换行符
const BlobTest = new Blob(["这里是blob对象的数据内容"], {type:"text/plain"})

这里是他的对象结构，控制台可以直接创建并且打印，我们看到size属性，代表数据有多少个字节，type属性则表示该对象是MIME类型的字符串，

MIME扩展

是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开，就比如说text/plain，说明这个文件是一个文本，浏览器就用打开文本的方式读取他，如果说是 PNG图像就是image/png ，以下列出一些常用的类型

超文本标记语言文本 .html text/html
xml文档 .xml text/xml
XHTML文档 .xhtml application/xhtml+xml
普通文本 .txt text/plain
RTF文本 .rtf application/rtf
PDF文档 .pdf application/pdf
Microsoft Word文件 .word application/msword
PNG图像 .png image/png
GIF图形 .gif image/gif
JPEG图形 .jpeg,.jpg image/jpeg
au声音文件 .au audio/basic
MIDI音乐文件 mid,.midi audio/midi,audio/x-midi
RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
TAR文件 .tar application/x-tar
任意的二进制数据 application/octet-stream

Blob API

window.URL.createObjectURL方法可以把一个blob转化为一个Blob URL，并且用做文件下载或者图片显示的链接，他仅仅是浏览器内部的引用，并不像Base64格式一样是真正的储存，而是类似对象中的key，在浏览器中读取这个key，浏览器可以显示这个文件

<input type="file" id='f' />
<img id='img' style="width: 200px;height:200px;" />
<!-- js部分 -->
<script>
  document.getElementById('f').addEventListener('change', function (e) {
    var file = this.files[0];
    const img = document.getElementById('img');
    const url = window.URL.createObjectURL(file);
    img.src = url;
    img.onload = function () {
        // 释放一个之前通过调用 URL.createObjectURL创建的 URL 对象
        window.URL.revokeObjectURL(url);
    }
  }, false);
</script>

小结：例子中选择一张图片，将他存为blob对象，然后把他转换为Blob URL，然后把这个url放到html中img标签的src，就能显示这张图片，Blob URL通俗的说就是这张图片的地址，映射。

Blob实现分片上传

slice方法： slice([start[, end[, contentType]]])：返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据 ,类似切割字符串，把一个blob切割成几份新的blob对象，通常用在分片上传。

<!-- html部分 -->
<input type="file" id='f' />
<!-- js部分 -->
<script>
function upload(blob) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/ajax', true);
    xhr.setRequestHeader('Content-Type', 'text/plain')
    xhr.send(blob);
}

document.getElementById('f').addEventListener('change', function (e) {
    var blob = this.files[0];
    const CHUNK_SIZE = 20; .
    const SIZE = blob.size;
    var start = 0;
    var end = CHUNK_SIZE;
    while (start < SIZE) {
        upload(blob.slice(start, end));
        start = end;
        end = start + CHUNK_SIZE;
    }
}, false);
</script>

小结：这里利用slice，把一个文件切成可控制的大小切片，第一次传0-20字节，然后20-40，直到传完，切割完如何拼接呢，利用新创建一个blob对象，把分片的数据放进新对象中做数据 1608736575630

从互联网下载数据

const myImage = document.querySelector('img');
const myRequest = new Request('flowers.jpg');

fetch(myRequest)
  .then(function(response) {
    return response.blob();
  })
 .then(function(myBlob) {
   let objectURL = URL.createObjectURL(myBlob);
   myImage.src = objectURL;
});

小结：这里是先取到页面中的img标签，然后取请求一张图片，然后回调中的blob取出来，然后生成 objectURL ，然后赋值给img中的src，然后页面就能显示了，

Blob和ArrayBuffer的区别

Blob表示不可变的类似文件对象的原始数据，File接口基于Blob，继承了Blob功能并且将其扩展成支持用户系统上的文件
ArrayBuffer（暂不理解，后续补充），表示固定长度的，原始二进制数据缓冲区且「不能直接操纵」
可以互相转换

//ArrayBuffer 转 Blob
const buffer = new ArrayBuffer(16);
const blob = new Blob([buffer]);
//Blob 转 ArrayBuffer
const blob = new Blob([1,2,3,4,5]);
const reader = new FileReader();
reader.onload = function() {
    console.log(this.result);
}
reader.readAsArrayBuffer(blob);

未完待续

Blob详解（一）