Blob
全称：binary large object，二进制大对象，是一个js对象，可以用来存储大量二进制编码格式的数据，Blob对象是不可修改的，读取内容的唯一方法是FileReader。
创建一个Blob对象：
new Blob(array,options)
array:由ArrayBuffer，ArrayBufferView，Blob，DOMString等对象构成的，将会被放进Blob；
options：
type：默认为空""，表示将被放到blob中数组内容的MIME类型。
endings：默认为"transparent"，用于指定包含行结束符\n的字符串如何被写入，不常用。
| MIME类型 | 描述 |
| text/plain | 纯文本 |
| text/html | HTML文档 |
| text/javascript |
Js文件 |
| text/css | css文件 |
| application/json | json文件 |
| application/pdf | pdf文件 |
| application/xml | xml文件 |
| image/jpeg | jpeg图像 |
| image/png | png图像 |
| image/svg+xml | svg图像 |
| image/gif | gif图像 |
| audio/mpeg | mp3文件 |
| video/mpeg | mp4文件 |
创建：
<!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>
</body>
<script>
let blob = new Blob(["helloworld"],{type:"text/plain"})
console.log(blob); //Blob {size: 10, type: 'text/plain'}
</script>
</html>注意这里必须使用浏览器打开，node中没有blob对象，会报错。
分片
blob对象内置slice()方法，可以将blob对象分片
三个参数：
start：设置切片的起点，即切片开始的位置，默认值为0，表示从第一个字节开始。
end：设置切片的结束点，会对该位置之前的数据进行切片，默认值为blob.size.
contentType：设置新blob的MIME类型，如果省略，则默认为blob的原始值
<!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>
</body>
<script>
let blob = new Blob(["helloworld"],{type:"text/plain"})
let blob2 = blob.slice(0,5,"text/plain")
let fileReader= new FileReader()
fileReader.readAsText(blob2)
fileReader.onload=function(res){console.log(res.target.result);} //读取完文件触发，hello
</script>
</html>File
File对象是特殊类型的object，在js中主要有两种方法来获取File对象：
1.input输入框选择文件后，返回的fileList对象
2.文件拖放操作生成的Datatransfer对象
<!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>
<input type="file" id="file">
</body>
<script>
file.onchange = function (e) {
console.log(e.target.files); //可以查到对应上传的文件，file是继承blob的对象
}
</script>
</html><!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>
<style>
.dropArea{
width: 300px;
height: 300px;
border:1px solid red;
}
</style>
<body>
<div class="dropArea" id="dropArea">
</div>
</body>
<script>
dropArea.ondragover=function(e){
e.preventDefault();
}
dropArea.ondrop=function(e){
e.preventDefault()
console.log(e.dataTransfer.files); //可看到对应的文件
}
</script>
</html>FileReader
fileReader提供了读取blob里面内容的方法
1.readAsArrayBuffer():读取指定的Blob内容，result属性中保存的将是被读取文件的ArrayBuffer对象。
2.readAsBinaryString():读取指定的Blob内容，result属性中保存的将是被读取文件的原始二进制数据。
3.readAsDataURL():读取指定的Blob内容，result属性包含一个data:URL格式的Base64字符串。
4.readAsText():读取指定的Blob内容，result属性包含一个字符串表示所读取的文件内容。
还有一些api：
转base64
<!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>
<input type="file" id="file">
</body>
<script>
let fileReader = new FileReader()
file.onchange = function (e) {
console.log(e.target.files); //可以查到对应上传的文件，file是继承blob的对象
fileReader.readAsDataURL(e.target.files[0])//转base64
fileReader.onload = function (res) { console.log(res.target.result); }//显示base64的字符串
}
</script>
</html>转字符串且读取：
<!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>
</body>
<script>
let blob = new Blob(["helloworld"],{type:"text/plain"})
let fileReader= new FileReader()
fileReader.readAsText(blob)
fileReader.onload=function(res){console.log(res.target.result);} //读取完文件触发，hello
</script>
</html>ArrayBuffer
我们可以理解为特殊的数组，不能直接操作所存储的数据，我们使用的还是下面TypeArray九个对象
分为两种工具，一种是TypeArray类型的，另外一种就是DataView，前者的数组成员都是同数据类型，后者可以是不同的数据类型，类似于元组。
TypeArray创建并操作buffer
<!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>
</body>
<script>
let buffer = new ArrayBuffer(32)
console.log(buffer);
let buffer2=new Int8Array(buffer)
buffer2[0]=100 //可以操作数据
console.log(buffer2);
</script>
</html>DataView提供了以下方法来操作buffer：
| 读取（参数都是一个字节序号，表示开始读取的字节位置） | 存储（参数两个，第一个为开始写入数据的字节序号，第二个是写入的数据） |
| getInt8：读取1个字节，返回一个8位整数 | setInt8：写入1个字节的8位整数 |
| getUint8：读取1个字节，返回一个无符号的8位整数 | setUint8：写入1个字节的无符号的8位整数 |
| getInt16：读取2个字节，返回一个16位整数 | setInt16：写入2个字节的16位整数 |
| getUint16：读取2个字节，返回一个无符号的16位整数 | setUint16：写入2个字节的无符号的16位整数 |
| getInt32：读取4个字节，返回一个32位整数 | setInt32：写入4个字节的32位整数 |
| getUint32：读取4个字节，返回一个无符号的32位整数 | setUint32：写入2个字节的无符号的32位整数 |
| getFloat32：读取4个字节，返回一个32位浮点数 |
setFloat32：写入4个字节32位浮点数 |
| getFloat64：读取8个字节，返回一个64位浮点数 | setFloat64：写入8个字节64位浮点数 |
<!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>
</body>
<script>
let buffer = new ArrayBuffer(32)
let dataView=new DataView(buffer)
dataView.setInt8(0,100)
console.log(dataView.getInt8(0)); //100
</script>
</html>Object URL
用来表示File Object 或 Blob Object的URL
<!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>
<input type="file" id="file">
</body>
<script>
let fileReader = new FileReader()
file.onchange = function (e) {
console.log(e.target.files); //可以查到对应上传的文件，file是继承blob的对象
URL.createObjectURL(e.target.files[0])//转为Object URL
console.log(URL.createObjectURL(e.target.files[0]))
}
</script>
</html>Base64
在js中，有两个函数分别用来处理解码和编码base64字符串：
atob（）：解码，解码一个base64字符串，
btoa（）：编码从一个字符串或者二进制数据编码一个base64字符串
let str = atob(str1)
let str2=btoa(str)1.canvas画布内容转为base64的图片
2.将获取的图片文件，生成base64图片（fileReader来生成）
<!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>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
let ctx=canvas.getContext("2d")
ctx.fillRect(0,0,100,100)
let dataUrl = canvas.toDataURL()//canvas转base64
console.log(dataUrl);
</script>
</html>总结：
ArrayBuffer和Blob的区别
Blob作为一个整体文件，适合用于传输，当需要对二进制数据进行操作时，使用ArrayBuffer。
通过ArrayBuffer创建Blob，然后通过FileReader读取里面的内容。
<!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>
</body>
<script>
let buffer = new ArrayBuffer(8)
let buffer2=new Int8Array(buffer)
buffer2[0]=100
console.log(buffer2[0]);
let blob = new Blob([buffer2])
let fileReader = new FileReader()
fileReader.readAsArrayBuffer(blob)
fileReader.onload=function(res){
console.log(new Int8Array(res.target.result));
}
</script>
</html>