File、FileReader、Blob之间的关系介绍

在我们学习断点续传的前提下，我需要掌握的基础就是流文件的相关处理，这里主要说明一些常见的属性和方法，需要更高深的东西，可以自行学习。

File

来源与input上传或者拖拉拽的地方 file继承自Blob，所以是一种特殊的Blob

在原生的input上，type="file"进行文件上传或者组件库封装的上传组件里均可以获得

Blob

全称：二进制大对象，本质是一个js对象，不可以修改。读取内容的方法只有FileReader

出现的场景：主要是在文件下载或上传时

创建Blob

const blob = new Blob(Array,option?:{type:string)

Array:可以ArrayBuffer或者Blob

option:{ type:MIME类型 }

blob实例上存在size和type属性: size获取大小，type获取类型

分片

在大文件上传的时候，前端需要将流文件切割成n个小块上传，Blob 对象内置了 slice() 方法用来将 blob 对象分片，和数组的方法很像。

其有三个参数：

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

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

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

FileReader

常见的读取blob的方法

const blob = new Blob([1,2])
// 读取blob
const reader = new FileReader()

//读取成base64
reader.readAsDataURL(blob)

// 读取成字符串
render.readAsText(blob)

// 读取成ArrayBuffer
render.readAsArrayBuffer(blob)

console.log(reader.result)

demo

const blob = new Blob(['demo-demo']);
const reader = new FileReader();
reader.readAsText(blob)
reader.onload = (e) => {
 console.log(e.target.result)
}