Blob

Blob对象表示不可变的原始二进制数据。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作

创建Blob对象

new Blob(sources: (Blob | BinaryLike)[], options?: BlobOptions | undefined): Blob

sources 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会返回一个 Blob。

option指定如下两个属性

type blob 中的数组内容的 MIME 类型。
encoding 编码格式

    let str = ['asdf']; // 一个包含 DOMString 的数组
    let blob = new Blob(str, {type : 'text/plain'}); // 得到 Blob实例对象
    console.log(blob);//Blob { size: 4, type: 'text/plain' }

Blob 实例属性

size Blob 对象中所包含（字节）数。

    console.log(blob.size) //4

type Blob 对象中包含数据的 MIME 类型。

    console.log(blob.size)//text/plain

Blob 实例方法

arrayBuffer()

方法返回一个 Promise 对象，包含 blob 中的数据，并在 ArrayBuffer 中以二进制数据的形式呈现。

    blob.arrayBuffer().then(res=>{
        console.log(res) //ArrayBuffer { [Uint8Contents]: <31 32 33 34 35 36>, byteLength: 6 }
    })

slice()

创建一个包含源 Blob的指定字节范围内的数据的新 Blob 对象

    console.log(blob.slice(0,2,"text/html"));//Blob { size: 2, type: 'text/html' }

stream()

返回一个ReadableStream对象，读取它将返回包含在Blob中的数据

    let stream = blob.stream();
    console.log(stream)  //ReadableStream { locked: false, state: 'readable', supportsBYOB: false }、
    1. getReader() //返回的 stream 上获取一个对象
        // ReadableStreamDefaultReader {
        //     stream: ReadableStream { locked: true, state: 'readable', supportsBYOB: false },
        //     readRequests: 0,
        //     close: Promise { <pending> }
        // }
    2. 调用read()//方法读取blob对象
    stream.getReader().read().then(res=>{
        console.log(res.value);
        let f=Buffer.from(res.value)
        console.log(f.toString());
    })

text()

方法返回一个 Promise 对象，包含 blob 中的内容使用 UTF-8 格式编码不可以更改编码格式

    blob.text().then(res => {
         console.log(res);//123456
    })

File

简介：

File File 接口基于 Blob，继承了 Blob 的功能并将其扩展以支持用户系统上的文件。通常情况下， File 对象是来自用户在一个元素上选择文件后返回的 FileList 对象，也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。 File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如说， FileReader, URL.createObjectURL(), createImageBitmap() (en-US), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

注意: File 对象中只存在于浏览器环境中，在 Node 环境不存在！！

创建对象

new File(data,name,option?)

data 一个包含ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 对象的 Array — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。

name 表示文件名称，或者文件路径

options

type MiMe类型
lastModified 文件最后修改时间

    /**
    * 
    * File{
            lastModified: 1675994362306       最后修改时间
            lastModifiedDate: Fri Feb 10 2023 09:59:22 GMT+0800 (中国标准时间) {}   !弃用
            name: "arr"                       表示的文件的名称
            size: 9                           文件大小
            type: ""                          MIME Type文件类型
            webkitRelativePath: ""            非标准: 该特性是非标准的，尽量不要在生产环境中使用它！
        }
    * 
    */
    var file = new File([456,789,123], "arr");
    console.log(file)

FileList

一个 FileList 对象通常来自于一个 HTML input 元素的 files 属性，你可以通过这个对象访问到用户所选择的文件。该类型的对象还有可能来自用户的拖放操作

     <input type="file" name="File" id="File" accept=".doc,.docx,.pdf,.ai,.psd,.jpg" multiple="multiple"
        onchange="change(event)">

    const fileDom = document.querySelector('#File');
        function change(e) {
            if (e.target.files[0].size > 500 * 1024 * 1024) { // 限制文件上传大小
                alert("文件不能大于500M")
            } else {
                console.log(e);
                // 文件赋值
                let file = e.target.files //FileList  [File...]
                console.log(e.target);
            }
        }

实例属性

length 返回FileList集合长度

实例方法

item(index) 返回FileList集合index处File对象

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4天，点击查看活动详情

Blob、File、FileList