Blob

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

要从其他非 Blob 对象和数据构造一个 Blob，使用 Blob() 构造函数。要创建一个 Blob数据的子集 Blob，使用 slice() 方法。

Blob 构造函数：Blob(blobParts[, options])，允许通过其它对象创建 Blob 对象。比如，用字符串构建一个 Blob ：

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

**Blob** 属性
属性	描述
size	Blob 对象中所包含数据的大小（字节）
type	一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

**Blob** 方法
方法	描述
Blob.slice([start[, end[, contentType]]])	返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据
Blob.stream()	返回一个能读取 Blob 内容的 ReadableStream
Blob.text()	返回一个 promise 且包含 Blob 所有内容的 UTF-8 格式的 USVString
Blob.arrayBuffer()	返回一个 promise 且包含 Blob 所有内容的二进制格式的 ArrayBuffer

File

通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象。

File 对象是特殊类型的 Blob，可用在任意的 Blob 类型的 context 中。例如：FileReader，URL.createObjectURL()，createImageBitmap()，及 XMLHttpRequest.send() 都能处理 Blob 和 File。

File 属性：

属性	描述
lastModified	返回当前 File 对象所引用文件最后修改时间（毫秒数）
lastModifiedDate	返回当前 File 对象所引用文件最后修改时间的 Date 对象
name	返回当前 File 对象所引用文件的名字
size	返回当前 File 对象所引用文件的大小
type	返回当前 File 对象所引用文件的多用途互联网邮件扩展类型（MIME Type）
webkitRelativePath	返回当前 File 对象所引用文件相关的 path 或 URL

File 方法：File 接口没有定义任何方法，但是它从 Blob 接口继承了以下方法：Blob.slice([start[, end[, contentType]]])

FileReader

HTML5 的 FileReader API 可以让客户端浏览器对用户本地文件进行读取，这样就不再需要上传文件由服务器进行读取了，这大大减轻了服务器的负担，也节省了上传文件所需要的时间。根据 W3C 的定义，FileReader 接口提供了读取文件的方法和包含读取结果的事件模型。

1、检测浏览器对 FileReader 的支持

if (window.FileReader) {
    var fr = new FileReader();
    // add your code here
} else {
    alert("Not supported by your browser!");
}

2.、调用 FileReader 对象的方法

FileReader 的实例拥有 5 个方法，其中 4 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能。文件读取之后无论读取成功或失败，方法并不会返回读取结果。

方法名	参数	描述
abort	none	中断读取操作
readAsText	Blob or File ， [encoding]	将文件读取为文本
readAsArrayBuffer	Blob or File	将文本读取为 arraybuffer
readAsBinaryString	Blob or File	将文件读取为二进制码(已废弃)
readAsDataURL	Blob or File	将文件读取为 DataURL

        readAsText：该方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)，其中第二个参数是文本的编码方式，默认值为 UTF-8。
        readAsBinaryString：该方法已从 FileAPI 标准移除，请使用 readAsArrayBuffer 代替。
        readAsDataURL：该方法将文件读取为一个 data:URL 格式的字符串（base64 编码），这段字符串的实质就是 Data URL，Data URL 是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

3、处理事件

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

4、获取文件读取结果

执行文件读取操作之后，读取的结果保存在创建的 FileReader 对象的 result 属性中，也可以通过监听处理事件获取读取结果，这一结果存储在 ProgressEvent.target.result 属性中。具体见如下文件读取示例：

<html>
<head>
<title>FileReader</title>
<label class="btn" for="uploads">选择文件</label>
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" onchange="selectfile(event)">
<style>
.btn {
  position:relative;
  left:50%;
  top:50%;
  font-size: 12px;
  border-radius: 3px;
  color: #fff;
  background-color: #409EFF;
  padding: 8px 15px;
}
</style>
</head>

<body>
<script>
function selectfile (e) {
  let file = e.target.files[0]
  // 创建 FileReader 对象
  let fr = new FileReader()
  fr.readAsDataURL(file)
  fr.onload = (ProgressEvent) => {
    let data = ProgressEvent.target.result;
	alert("读取文件结果：" + data)
  }
}
</script>
</body>
</html>

转换

base64 字符串转换成 Blob 对象：

/**
 * @param {String} dataurl 完整的base64字符串
 * @return: Blob 对象
 */
dataURLtoBlob(dataurl) {
  var arr = dataurl.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length;
  var u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

base64 字符串转换成 Blob 字符串，Blob 字符串可以像使用普通 URL 那样使用它，比如用在 img.src 上。

/**
 * @param {String} base64 base64字符串
 * @return: Blob 字符串,可以直接用作下载路径url
 */
createDownloadBlobUrl(base64) {
  const blob = this.dataURLtoBlob(base64);
  return URL.createObjectURL(blob);
}

ArrayBuffer 和 Blob 对象相互转换

// arrayBuffer 转换成 blob
let blob = new Blob(arraybuffer)

// blob 转换成 arrayBuffer
blob.arrayBuffer().then(arraybuffer => {
    // do something...
})

html 5 FileReader

Blob

File

FileReader

转换

猜你喜欢