探一探Blob

最新推荐文章于 2022-10-17 18:33:42 发布

阿莹yes

最新推荐文章于 2022-10-17 18:33:42 发布

阅读量126

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_40968685/article/details/109444361

版权

js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

进入正题

Blob是什么

Blob对象表示一个不可变、原始数据的类文件对象。
它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。
blob表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承blob的功能并将其扩展使其支持用户系统上的文件。

Blob怎么使用

Blob()构造函数返回一个新的Blob对象。blob的内容由参数数组中给出的值串联组成。

var aBlob = new Blob(array, options);

array 是一个由ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成的Arrar，或者其他类似对象的混合体，它将会被放进Blob。DOMString会被编码为UTF-8.
options 是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：
- type 默认值为“”，它代表了将会被放入到blob中的数组内容的MIME类型。
- endings 默认值为transparent，用于指定包含行结束符\n的字符串如何被写入。它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持blob中保存的结束符不变

ArrayBuffer 是什么

概念：
ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。

它是一个字节数组，通常在其他语言中称为“byte array”。

你不能直接操作 ArrayBuffer 的内容，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

TypedArray 是什么

一个类型化数组（TypedArray）对象描述了一个底层的二进制数据缓冲区（binary data buffer）的一个类数组视图（view）。事实上，没有名为 TypedArray 的全局属性，也没有一个名为` TypedArray 的构造函数。相反，有许多不同的全局属性，它们的值是特定元素类型的类型化数组构造函数，如下所示。在下面的页面中，你会发现一些，与包含任何类型的元素的任意类型化数组一起使用的通用属性和方法。

DOMString 是什么

DOMString 是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString 直接映射到一个String。

将 null传递给接受DOMString的方法或参数时通常会把其stringifies为“null”。

练习、实践

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>blob应用实践</title>
</head>
<body>
  <input type="file" onchange="handleChange(event)">
  <button onclick="download()">下载</button>
  <button onclick="upload()">上传</button>
  <script>
  let bytes = null;
  function handleChange(e){
    // file 文件流
    let file = e.target.files[0];
    // FileReader 读取流
    let fileReader = new FileReader()
      fileReader.onload = e =>{
        // atob 是一个全局方法
        // base64 必须要转换成 字符数 
        // console.log(e.target.result)
        // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4RDkR
          bytes = atob(e.target.result.split(',')[1])
      }
      fileReader.readAsDataURL(file)
  }
  function download(){
    let data = bytes
    //1、创建一个 数组(Buffer)
    let b = new ArrayBuffer(data.length)
    //2、创建 Uint8Array
    let arr = new Uint8Array(b)

    for(let i=0;i<data.length;i++){
      arr[i] = data.charCodeAt(i)
    }
    // 创建流
    let blob = new Blob([arr],{type:'image/png'})

    let a = document.createElement('a')
      a.download = 'user.png'//下载名
      a.rel = 'noopener'
      // a.href = blob;
      a.href = URL.createObjectURL(blob)
      a.dispatchEvent(new MouseEvent('click'));
      URL.revokeObjectURL(blob);//销毁objectURL 也会销毁Blob
  }
  
  function upload(){
    let data = bytes
    //1、创建一个 数组(Buffer)
    let b = new ArrayBuffer(data.length)
    //2、创建 Uint8Array
    let arr = new Uint8Array(b)

    for(let i=0;i<data.length;i++){
      arr[i] = data.charCodeAt(i)
    }
    // 创建流
    let blob = new Blob([arr],{type:'image/png'})

    let xhr = new XMLHttpRequest()
    let formData = new FormData();
    formData.append('avatar',blob)
    xhr.open('POST','http://localhost:4000/upload',true);
    xhr.send(formData);
  }
  </script>
</body>
</html>

String转换成Blob对象

//将字符串 转换成 Blob 对象
var blob = new Blob(["Hello World!"], {
    type: 'text/plain'
});
console.info(blob);
console.info(blob.slice(1, 3, 'text/plain'));

TypeArray转换成 Blob对象

//将 TypeArray  转换成 Blob 对象
var array = new Uint16Array([97, 32, 72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 33]);
//测试成功
//var blob = new Blob([array], { type: "application/octet-binary" });
//测试成功， 注意必须[]的包裹
var blob = new Blob([array]);
//将 Blob对象 读成字符串
var reader = new FileReader();
reader.readAsText(blob, 'utf-8');
reader.onload = function (e) {
    console.info(reader.result); //a Hello world!
}

ArrayBuffer转Blob

var buffer = new ArrayBuffer(32);
var blob = new Blob([buffer]);       // 注意必须包裹[]

将Blob对象转换成String字符串，使用FileReader的readAsText方法

//将字符串转换成 Blob对象
var blob = new Blob(['中文字符串'], {
    type: 'text/plain'
});
//将Blob 对象转换成字符串
var reader = new FileReader();
reader.readAsText(blob, 'utf-8');
reader.onload = function (e) {
    console.info(reader.result);
}

将Blob对象转换成ArrayBuffer，使用FileReader的 readAsArrayBuffer方法

//将字符串转换成 Blob对象
var blob = new Blob(['中文字符串'], {
    type: 'text/plain'
});
//将Blob 对象转换成 ArrayBuffer
var reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function (e) {
    console.info(reader.result); //ArrayBuffer {}
    //经常会遇到的异常 Uncaught RangeError: byte length of Int16Array should be a multiple of 2
    //var buf = new int16array(reader.result);
    //console.info(buf);
 
    //将 ArrayBufferView  转换成Blob
    var buf = new Uint8Array(reader.result);
    console.info(buf); //[228, 184, 173, 230, 150, 135, 229, 173, 151, 231, 172, 166, 228, 184, 178]
    reader.readAsText(new Blob([buf]), 'utf-8');
    reader.onload = function () {
        console.info(reader.result); //中文字符串
    };
 
    //将 ArrayBufferView  转换成Blob
    var buf = new DataView(reader.result);
    console.info(buf); //DataView {}
    reader.readAsText(new Blob([buf]), 'utf-8');
    reader.onload = function () {
        console.info(reader.result); //中文字符串
    };
}

文件上传下载以及进度的显示 - 传送门

欢迎指正～

阿莹yes

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
探一探Blob

目录进入正题Blob是什么Blob怎么使用ArrayBuffer 是什么TypedArray 是什么DOMString 是什么练习、实践String转换成Blob对象TypeArray转换成 Blob对象ArrayBuffer转Blob将Blob对象转换成String字符串，使用FileReader的readAsText方法将Blob对象转换成ArrayBuffer，使用FileReader的 readAsArrayBuffer方法文件上传下载，是通过什么方式来实现的，今天来一探究竟进入正题Blo
复制链接

扫一扫