Blob实现分片上传、并行下载

项目中需要对大文件上传下载操作

一、Blob是什么

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，存储为一个单一个体的集合。

Blob通常是影像、声音或者多媒体文件。

如图：

通过 Blob()构造函数，创建一个Blob对象

Blob对象有两个属性

size ：对象中所包含数据字节的大小

type：表明对象中内容的MIME类型

二、Blob API简介

2.1 方法

• slice([start [ , end [ ,contentType ] ]]) :  返回一个新Blob对象，包含了源Blob对象中指定范围内的数据。
• stream() ：返回一个能读取blob内容的 ReadableStream
• text()：返回一个Promise包含blob所有内容的UTF-8格式的USVString
• arrayBuffer()：返回一个Promise对象且包含blob所有内容的二进制格式的ArrayBuffer

上述方法均返回一个新对象 （Blob对象是不可改变的）

三、使用场景

3.1 分片上传

File对象是特殊类型的Blob，针对大文件上传，我们可以使用slice方法对大文件进行切割，然后分片进行上传；

//创建一个size为10000的txt文件
const file = new File(['a'.repeat(10000), 'test.txt']);
const chunkSize = 4000;

const url = '上传地址'
async function chunkUpload(){
    for(let i = 0; i < file.size; i+= chunkSize){
        //每片文件
        const chunk = file.slice(i , i+chunkSize + 1);
        const formData = new FormData();
        formData.append("data", chunk);        //上传
        await http(url,{ methods: "post", body: formData }).then(res => res.text())
    }
}

3.2 并行下载

待续...