JavaScript—Blob
前端知识库 JavaScript 14

1. Blob

Blob对象标识一个不可变，二进制类型的类文件对象。它的数据可以按照文本或者二进制进行读取。

Blob表示的不一定是JavaScript原生格式的数据，也可以是File对象的数据，File接口继承Blob，要从其它非Blob对象和数据构造一个Blob，可以使用Blob对象的构造函数，如果需要创建一个blob的子集，可以使用slice()方法。

1.1 Blob构造函数

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

const blob = new Blob(array,[options])

构造函数接收两个参数：

第一个参数是数组，成员是字符串或二进制对象等，表示新生成的Blob实例对象的内容。

第二个参数可选，表示配置对象，有两个属性：

  • type：默认值为空字符串，表示将会被放入Blob数组内容的MIME类型

  • endings：默认值为"transpartent"，用于指定包含结束符的字符串如何被写入

示例：

const obj = {hello:'world'}
const blob = new Blob([JSON.stringify(obj),{type:'application/json'}])
console.log(blob)
​
// 输出：Blob {size:17,type:'application/json'}

1.2 Blob实例属性

Blob实例属性有两个：

  • Blob.size：只读，表示Blob对象中所包含数组的大小（字节）

  • Blob.type：只读，一个字符串，表示该Blob对象所包含数组的数据的MIME类型，如果类型未知，则该值为空字符串

1.3 Blob实例方法

  • Blob.text()：返回一个Promise对象并包含了blob所有内容的UTF-8格式字符串

  • Blob.arrayBuffer()：返回一个Promise对象且包含blob所有内容的二进制格式的ArrayBuffer

  • Blob.stream()：返回一个能读取blob内容的ReadableStream

  • Blob.slice([start[, end[, contentType]]])：返回一个新的Blob对象，包含了源Blob对象中指定范围内的数据

    • start：可选，Blob里的起始下标，如果为负数，从数据的末尾开始从后往前计算，默认值0，如果start的长度大于源Blob的长度，返回一个长度为0并且不包含任何数据的Blob对象

    • end：可选，Blob里的一个下标，如果为负数，从数据的末尾开始从后往前计算，默认值为源Blob的长度

    • contentType：可选，给新的Blob赋予一个新的文档类型 type，默认值为空字符串

blob.slice(1, 3, 'application/json')
// Blob {size: 2, type: 'application/json'}
blob.slice(33, 3)
// Blob {size: 0, type: ''}

1.4 从Blob读取数据

从Blob中读取数据的常用方式是使用FileReader

1.4.1 下载文件

（1）URL.createObjectURL()

URL.createObjectURL()会创建一个DOMString，其中包含一个表示参数中给出的对象的URL，这个URL的生命周期和创建它的窗口中的document绑定。这个新的URL对象表示指定的File对象或Blob对象，返回值格式为：Blob:URL

在每次调用createObjectURL()方法时，都会创建一个新的URL对象，即使你已经用相同的对象作为参数创建过。当不需要这些URL对象时，每个对象必须调用URL.revokeObjectURL()方法来释放。

（2）URL.revokeObjectURL()

URL.revokeObjectURL()方法用来释放一个之前已经存在的，通过调用URL.createObjectURL()方法创建的URL对象。当你结束使用某个URL对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

function download(blob){
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    document.body.appendChild(link)
    link.download = file.name // download属性指定文件名
    link.href = url // 为href属性指定下载链接
    link.click() // 触发link的click事件
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
}
// download方法传入的参数可以是File对象也可以是Blob对象

1.4.2 读取文件内容
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" id="input">
  <button onclick="getFile()">提交</button>
  <script>
    function getFile() {
      let fileDom = document.querySelector('#input')
      console.log(fileDom.files)
      const file = fileDom.files[0]
      const reader = new FileReader()
      reader.readAsText(file, 'UTF-8')
      reader.onload = function() {
        console.log(reader.result)
      }
    }
  </script>
</body>
</html>

2. FileReader

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件的内容，使用File或Blob对象指定要读取的文件或内容。

注意：FileReader仅用于以安全的方式从用户（远程）系统读取文件内容，它不能用于从文件系统中按路径名简单的读取文件。要在js中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取。

2.1 FileReader构造函数

使用FileReader()构造器去创建一个新的FileReader

const reader = new FileReader()

2.2 FileReader实例属性

  • FileReader.error：只读，表示在读取文件时发生的错误，DOMException

  • FileReader.readyState：只读，表示FileReader状态的数据

    • 值为0，表示还没加载任何数据，EMPTY

    • 值为1，表示数据正在被加载，LOADING

    • 值为2，表示已完成全部的读取请求，DONE

    reader = new FileReader()
console.log(reader.readyState) // 0
reader.readAsText(file, 'UTF-8')
console.log(reader.readyState) // 1
reader.onload = function() {
    console.log(reader.readyState) // 2
}

  • FileReader.result：只读，文件的内容，该属性仅在读取操作完成后才有效，数据的格式取决于使用哪种方法来启动读取操作

2.3 FileReader实例方法

  • FileReader.abort()：中止读取操作，在返回时，readyState属性为DONE FileReader对象提供了四个方法，处理Blob对象，Blob对象作为参数传入这些方法，然后以指定的格式返回

  • FileReader.readAsText()：将Blob或File对象根据特殊的编码格式转换为字符串形式内容，可以指定文本编码，默认UTF-8。常用来读取文本文件

  • FileReader.readAsArrayBuffer()：将Blob或File对象读取的文件数据转换为一个ArrayBuffer对象

  • FileReader.readAsBinaryString()：将Blob或File对象读取的文件数据转换为文件原始二进制格式，该特性是非标准的，尽量不要在生产环境使用

  • FileReader.readAsDataURL()：将Blob或File对象读取的文件数据转换为包含一个data:URL格式的字符串（Base64编码）

2.4 FileReader事件处理

  • FileReader.onloadstart：处理loadstart事件，该事件在读取操作开始时触发

  • FileReader.onload：处理load事件，该事件在读取操作完成时触发

  • FileReader.onloadend：处理loadend事件，该事件在读取操作结束时（要么成功，要么失败）触发

  • FileReader.onerror：处理error事件，该事件在读取操作发生错误时触发

  • FileReader.onabort：处理abort事件，该事件在读取操作被中断时触发

  • FileReader.onprogress：处理progress事件，该事件在读取Blob时触发

reader = new FileReader()
reader.readAsText(file, 'UTF-8')
reader.onloadstart = function() {
    console.log("start");
}
reader.onprogress = function() {
    console.log("progress");
}
reader.onload = function() {
    console.log("load")
}
reader.onloadend = function() {
    console.log("end")
}
// start
// progress
// load
// end


JavaScript—Blob
http://localhost:8090/archives/javascript--blob
作者
codevow
发布于
更新于
许可
前端知识库 JavaScript