JavaScript中Blob与FileReader构造函数详解及示例

Blob

Blob实例代表一种不可变且类似文件的原始数据对象。其数据内容支持以文本或二进制形式进行读取操作。

Blob所表示的数据未必是JavaScript原生格式，File接口建立在Blob基础之上，继承了Blob的功能并进行了扩展，从而支持读取用户系统中的文件。

若需基于其他非Blob对象或数据构建Blob，应调用Blob()构造函数。若需获取blob的部分数据，可调用slice方法。

构造函数

Blob()构造函数用于生成新的Blob对象，该对象的内容由参数数组中提供的值连接而成。

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

该构造函数接收两个参数：第一个参数为数组，其成员可以是字符串或二进制对象等，用于定义新生成的Blob实例的内容；第二个参数为可选的配置对象，包含type和endings两个属性。type属性默认为空字符串，指定放入Blob中的数组内容的MIME类型；endings属性默认为"transparent"，用于指定包含行结束符的字符串在写入时的处理方式。

示例

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

实例属性

• Blob.size：只读属性，表示Blob对象中包含的数据大小（以字节为单位）。
• Blob.type：只读属性，为表示该Blob对象所包含数据的MIME类型的字符串；若类型未知，则该值为空字符串。

实例方法

• Blob.text()：返回一个Promise，该Promise解析后包含以UTF-8格式编码的blob全部内容的USVString。
• Blob.arrayBuffer()：返回一个Promise，该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: ''}

从Blob中提取数据

一种从Blob中读取内容的方法是使用FileReader。

下载文件

相关知识点：

URL.createObjectURL()

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

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

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对象

读取文件内容

<!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>

FileReader

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

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

构造函数

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

const reader = new 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：只读，文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪种方法来启动读取操作。

实例方法

• 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编码）

事件处理

• 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

以上就是JS开发Blob和FileReader构造函数使用示例详解的详细内容，更多关于JS构造函数Blob FileReader的资料请关注本站其它相关文章！