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

摘要： file在js中有很多二进制数据，有file,base64,Blob,ArrayBuffer,FileReader。这些二进制数据在文件导出和下载的时候是经常会用到的，我们这篇文章...

File

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

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

file文件

file文件一般有两种来源

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

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种数据格式的视图。

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 }); } 

温馨提示：由于文章篇幅有限，关于几种二进制的详细用法可以去MDN查看。

以上就是js二进制数据及其互相转化实现详解的详细内容，更多关于js二进制数据互相转化的资料请关注云初冀北其它相关文章！

本站提供的资源，都来自网络，版权争议与本站无关，所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您必须在下载后的24个小时之内，从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。侵删请致信E-mail：Goliszhou@gmail.com