文件处理:BlobAPI

115 阅读1分钟

1、什么是Blob

Blob的本质是一个js二进制大对象(存储的内容为文件),是不可修改的,读取方式为FileReader

2、如何创建

<script>
new Blob(array,options)

array:由ArrayBuffer、ArrayBufferView、Blo、DOMString等对象(文件数据源)

options:它可能会指定如下两种属性(指定文件类型/文件格式)
1. type:默认值为"",表示将会被放入到blob中的数组内容的MIME类型。
2. endings:默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入,不常用
</script>
MIME类型描述
text/plain纯文本文档
text/htmlHTML文档
text/javascriptJavaScript文件
text/cssCSS文件
application/jsonJSON文件
application/pdfPDF文件
application/xmlXML文件
image/jpegJPEG图像
image/pngPNG图像
image/gifGIF图像
image/svg+xmlSVG图像
audio/mpegMP3文件
video/mpegMP4文件

3、分片

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

其中有三个参数:
start:这是分片起点,默认值为0;
end:设置切片终点,默认值为blob.size;
contentType:设置新blob的MIME类型。如果省略type,则默认值为blob的原始值
</script>

4、演示

<script> 
//1、创建
let blob = new Blob(['helloWorld'],{type:"text/plain"})

//2、分片
let blob2 = blob.slice(0,5,"text/plain")

//3、读取
let reader = new FileReader()
reader.readAsText(blob2)
console.log(reader)
</script>

#文档参考自:bilibiliUP主我们一起学前端#

#www.bilibili.com/video/BV1XD…