• File、Blob、FileReader、ArrayBuffer、Base64


    一、Blob

    Blob全称为binary large object ,即二进制大对象。blob对象本质上是js中的一个对象,里面可以储存大量的二进制编码格式的数据。Blob对象的特点:

    • 不可修改
    • 从Blob中读取内容的唯一方法是使用FileReader

    1、创建

    new Blob(array,options)

    array:由ArrayBuffer、ArrayBufferView、Blob、DOMString等对象构成的,将会被放进Blob;

    options:

    • type:默认值为“”,表示将会被放入Blob中的数组内容的MIME类型。
    • endings:默认值为“transparent",用于指定包含行结束符\n的字符串如何被写入,不常用
    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文件

    2、Demo演示

    1. let blob = new Blob(['helloworld'],{type:"text/plain"});
    2. console.log(blob);

    Blob的属性

    • size:Blob对象中所包含数据的大小(字节 );
    • type:字符串,认为该Blob对象所包含的MIME类型,如果类型未知,则为空字符串。

    3、Blob的分片

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

    其有三个参数

    • start:设置切片的起点,默认为0,意味着从第一个字节开始;
    • end:切片的结束点,默认值blob.size;
    • contentType:设置blob的MIME类型。如果省略,则默认为blob的原始值。

    Demo实例:

    1. let blob1 = blob.slice(0,2,"text/plain");
    2. console.log(blob1);

     二、ArrayBuffer

    ArrayBuffer是一个特殊的数组。本身就是一个黑盒,不能直接读写所存储的数据,需要借助以下视图对象来读写。视图对象包含:

    Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array、Uint8ClampedArray。

    TypeArray视图和DataView视图的区别主要是字节序,前者的数组成员都是同一个数据类型,后者的数组成员可以是不同的数据类型。

    1、创建buffer

    1. let buffer = new ArrayBuffer(32);
    2. console.log(buffer);
    3. let u8 = new Uint8Array(buffer);
    4. console.log(u8);
    5. u8[0]=100;
    6. console.log(u8);

    运行结果:

     2、DataView

    1. let buffer = new ArrayBuffer(32);
    2. console.log(buffer);
    3. let d8 = new DataView(buffer);
    4. console.log(d8);
    5. console.log(d8.getInt8(1));
    6. //设置
    7. d8.setInt8(1,100);
    8. console.log(d8.getInt8(1));

    运行结果:

     

  • 相关阅读:
    base64
    b 树和 b+树的理解
    KMP算法真的有这么难吗?(清晰详细版)
    【c++】跟webrtc学状态改变
    2022-08-21 星环科技-C++开发笔试
    解决开了burp suite ,火狐访问不了其他网站的问题
    postMessage,addEventListener, 前端跨域请求之js代码解析
    EN 16034门窗及配件—CE认证
    go-micro使用Consul做服务发现的方法和原理
    CSS 外边距、填充、分组嵌套、尺寸
  • 原文地址:https://blog.csdn.net/qq_34754747/article/details/127833952