您好,登錄后才能下訂單哦!
這篇文章主要介紹“js二進(jìn)制數(shù)據(jù)及其互相轉(zhuǎn)化如何實(shí)現(xiàn)”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“js二進(jìn)制數(shù)據(jù)及其互相轉(zhuǎn)化如何實(shí)現(xiàn)”文章能幫助大家解決問(wèn)題。
在js中有很多二進(jìn)制數(shù)據(jù),有file,base64,Blob,ArrayBuffer,FileReader。這些二進(jìn)制數(shù)據(jù)在文件導(dǎo)出和下載的時(shí)候是經(jīng)常會(huì)用到的,我們這篇文章就是介紹這些二進(jìn)制數(shù)據(jù)以及它們之間的轉(zhuǎn)化。
文件(File)接口提供有關(guān)文件的信息,并允許網(wǎng)頁(yè)中的 JavaScript 訪問(wèn)其內(nèi)容。實(shí)際上,F(xiàn)ile 對(duì)象是特殊類(lèi)型的 Blob,且可以用在任意的 Blob 類(lèi)型的 context 中。Blob 的屬性和方法都可以用于 File 對(duì)象。
file文件一般有兩種來(lái)源
<input>
元素上選擇文件后返回的 FileList 對(duì)象;
文件拖放操作生成的 DataTransfer
對(duì)象;
每個(gè) File
對(duì)象都包含以下屬性,這些屬性都繼承自 Blob 對(duì)象:
lastModified
:引用文件最后修改日期,為自1970年1月1日0:00以來(lái)的毫秒數(shù);
lastModifiedDate
:引用文件的最后修改日期;
name
:引用文件的文件名;
size
:引用文件的文件大??;
type
:文件的媒體類(lèi)型(MIME);
webkitRelativePath
:文件的路徑或 URL。
Base64 是一種基于64個(gè)可打印字符來(lái)表示二進(jìn)制數(shù)據(jù)的表示方法。Base64 編碼普遍應(yīng)用于需要通過(guò)被設(shè)計(jì)為處理文本數(shù)據(jù)的媒介上儲(chǔ)存和傳輸二進(jìn)制數(shù)據(jù)而需要編碼該二進(jìn)制數(shù)據(jù)的場(chǎng)景。這樣是為了保證數(shù)據(jù)的完整并且不用在傳輸過(guò)程中修改這些數(shù)據(jù)。
Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類(lèi)文件對(duì)象。它的數(shù)據(jù)可以按文本或二進(jìn)制的格式進(jìn)行讀取,也可以轉(zhuǎn)換成 ReadableStream 來(lái)用于數(shù)據(jù)操作。
也就是說(shuō)blob對(duì)象是原始二進(jìn)制數(shù)據(jù)對(duì)象,是不可修改的。
new Blob(array, options);
array
:由 ArrayBuffer
、ArrayBufferView
、Blob
、DOMString
等對(duì)象構(gòu)成的,將會(huì)被放進(jìn) Blob
;
options
:可選的 BlobPropertyBag
字典,它可能會(huì)指定如下兩個(gè)屬性
type
:默認(rèn)值為 "",表示將會(huì)被放入到 blob
中的數(shù)組內(nèi)容的 MIME 類(lèi)型。
endings
:默認(rèn)值為"transparent
",用于指定包含行結(jié)束符\n
的字符串如何被寫(xiě)入,不常用。
ArrayBuffer 對(duì)象用來(lái)表示通用的、固定長(zhǎng)度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)。ArrayBuffer 的內(nèi)容不能直接操作,只能通過(guò) DataView 對(duì)象或 TypedArrray 對(duì)象來(lái)訪問(wèn)。這些對(duì)象用于讀取和寫(xiě)入緩沖區(qū)內(nèi)容。
TypedArray:用來(lái)生成內(nèi)存的視圖,通過(guò)9個(gè)構(gòu)造函數(shù),可以生成9種數(shù)據(jù)格式的視圖。
Int8Array
Uint8Array
Uint8ClampedArray
Int16Array
Unit16Array
Int32Array
Uint32Array
Float32Array
Float64Array
DataViews:用來(lái)生成內(nèi)存的視圖,可以自定義格式和字節(jié)序。
new ArrayBuffer(bytelength)
FileReader用于讀取文件并提取其內(nèi)容, 可以將 Blob 讀取為不同的格式。
創(chuàng)建
const reader = new FileReader();
let reader = new FileReader(); reader.readAsDataURL(file[0])
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; }
function blobToArrayBuffer(blob) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = () => reject; reader.readAsArrayBuffer(blob); }); }
function blobToBase64(blob) { return new Promise((resolve) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result); reader.readAsDataURL(blob); }); }
const blob = new Blob([new Uint8Array(buffer, byteOffset, length)]);
const base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));
const base64ConvertFile = function (urlData, filename) { // 64轉(zhuǎn)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 }); }
關(guān)于“js二進(jìn)制數(shù)據(jù)及其互相轉(zhuǎn)化如何實(shí)現(xiàn)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。