js二进制数据及其互相转化实现详解_js教程

file

在js中有很多二进制数据，有file,base64,Blob,ArrayBuffer,FileReader。这些二进制数据在文件导出和下载的时候是经常会用到的，我们这篇文章就是介绍这些二进制数据以及它们之间的转化。

文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。实际上，File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。Blob 的属性和方法都可以用于 File 对象。

file文件

file文件一般有两种来源

<input> 元素上选择文件后返回的 FileList 对象；
文件拖放操作生成的 DataTransfer 对象；

每个 File 对象都包含以下属性，这些属性都继承自 Blob 对象：

lastModified：引用文件最后修改日期，为自1970年1月1日0:00以来的毫秒数；
lastModifiedDate：引用文件的最后修改日期；
name：引用文件的文件名；
size：引用文件的文件大小；
type：文件的媒体类型（MIME）；
webkitRelativePath：文件的路径或 URL。

base64

Base64 是一种基于64个可打印字符来表示二进制数据的表示方法。Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。

Blob

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

也就是说blob对象是原始二进制数据对象，是不可修改的。

blob的用法

				?

									new Blob(array, options);

array：由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成的，将会被放进 Blob；

options：可选的 BlobPropertyBag 字典，它可能会指定如下两个属性

type：默认值为 ""，表示将会被放入到 blob 中的数组内容的 MIME 类型。

endings：默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入，不常用。

ArrayBuffer

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 的内容不能直接操作，只能通过 DataView 对象或 TypedArrray 对象来访问。这些对象用于读取和写入缓冲区内容。

TypedArray：用来生成内存的视图，通过9个构造函数，可以生成9种数据格式的视图。

Int8Array
Uint8Array
Uint8ClampedArray
Int16Array
Unit16Array
Int32Array
Uint32Array
Float32Array
Float64Array

DataViews：用来生成内存的视图，可以自定义格式和字节序。

ArrayBuffer的使用

				?

									new ArrayBuffer(bytelength)

FileReader

FileReader用于读取文件并提取其内容, 可以将 Blob 读取为不同的格式。

FileReader的使用

创建

				?

									const reader = new FileReader();

FileReader还有很多方法和事件，感兴趣的可以去MDN上查看。

二进制类型数据的互相转化

file转base64

				?

									let reader = new FileReader();

									reader.readAsDataURL(file[0])

base64转blob

				?

									const base64toBlob = (base64Data, contentType, sliceSize) => {

									  const byteCharacters = atob(base64Data);

									  const byteArrays = [];

									  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {

									    const slice = byteCharacters.slice(offset, offset + sliceSize);

									    const byteNumbers = new Array(slice.length);

									    for (let i = 0; i < slice.length; i++) {

									      byteNumbers[i] = slice.charCodeAt(i);

									    }

									    const byteArray = new Uint8Array(byteNumbers);

									    byteArrays.push(byteArray);

									  }

									  const blob = new Blob(byteArrays, {type: contentType});

									  return blob;

									}

blob转ArrayBuffer

				?

									function blobToArrayBuffer(blob) { 

									  return new Promise((resolve, reject) => {

									      const reader = new FileReader();

									      reader.onload = () => resolve(reader.result);

									      reader.onerror = () => reject;

									      reader.readAsArrayBuffer(blob);

									  });

									}

blob转base64

				?

									function blobToBase64(blob) {

									  return new Promise((resolve) => {

									    const reader = new FileReader();

									    reader.onloadend = () => resolve(reader.result);

									    reader.readAsDataURL(blob);

									  });

									}

ArrayBuffer转blob

				?

									const blob = new Blob([new Uint8Array(buffer, byteOffset, length)]);

ArrayBuffer转base64

				?

									const base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

base64转file

				?

									const base64ConvertFile = function (urlData, filename) { // 64转file

									    if (typeof urlData != 'string') {

									        return;

									    }

									    let arr = urlData.split(',')

									    let type = arr[0].match(/:(.*?);/)[1]

									    let fileExt = type.split('/')[1]

									    let bstr = atob(arr[1])

									    let n = bstr.length

									    let u8arr = new Uint8Array(n)

									    while (n--) {

									        u8arr[n] = bstr.charCodeAt(n);

									    }

									    return new File([u8arr], 'filename.' + fileExt, {

									        type: type

									    });

									}