整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、FileReader是用于讀取字符流。 要讀取原始字節流，請考慮使用FileInputStream 。
2、FileReader構造方法
1、public FileReader(String fileName) throws FileNotFoundException
解釋：創建一個新的 FileReader ，給定要讀取的文件的名稱。
參數：fileName - 要讀取的文件的名稱
異常：FileNotFoundException - 如果命名文件不存在，是一個目錄，而不是常規文件，或者由于某些其他原因無法打開讀取。
2、public FileReader(File file) throws FileNotFoundException
解釋：創建一個新的 FileReader ，給定 File讀取。
參數：file - 要閱讀的 File
異常：FileNotFoundException - 如果文件不存在，是一個目錄而不是常規文件，或者由于某些其他原因無法打開閱讀。
3、常用方法
1、public int read() throws IOException
讀一個字符 該方法將阻塞，直到字符可用，發生I / O錯誤或達到流的結尾。
結果 ：字符讀取，作為0到65535（ 0x00-0xffff ）范圍內的整數，如果已經達到流的末尾，則為-1。
2、public int read(char[] cbuf) throws IOException
將字符讀入數組。 該方法將阻塞，直到某些輸入可用，發生I / O錯誤或達到流的結尾。
參數 ：cbuf - 目的緩沖區
結果： 讀取的字符數，如果已經達到流的結尾，則為-1
4、將D盤的a.txt文件讀取到程序中，并打印到控制臺
package pro1;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.FileReader;
public class $Test03 {
public static void main(String[] args) throws Exception {
//源目錄
String sourcePath="D:\\a.txt";
//初始化字符輸入流
FileReader fileReader=null;
//定義int類型變量resultData：用于接收read方法讀取的字符值
int resultData=0;
try {
//將字符輸入流和sourcePath關聯起來
fileReader=new FileReader(sourcePath);
//循環讀取fileReader字符輸入流中字符，每次讀取一個字符
while ((resultData=fileReader.read()) !=-1) {
System.out.print((char)resultData);
}
} catch (Exception e) {
// TODO: handle exception
}finally {
fileReader.close();
}
}
}
第二種方法：通過字符數組讀取：
.檢測瀏覽器對FileReader兼容性的方法：
if(window.FileReader) {
var fr=new FileReader();
// add your code here
}
else {
alert("Not supported by your browser!");
}方法二：檢測FileReader類型
if(typeof FileReader==='undefined'){
alert('您的瀏覽器不支持圖片上傳，請升級您的瀏覽器');
return false;
}2.調用fileReader對象的方法
FileReader實例擁有四個方法, 其中三個是用來讀取文件, 另一個是用來中斷讀取的。需要注意的是, 無論讀取成功或是失敗, 方法并不會返回讀取結果,
這一結果(儲存在result屬性中)要用FileReader處理事件去獲取；
方法名 參數 描述
abort none 中斷讀取
readAsBinaryString file 將文件轉化為二進制碼
readAsDataURL file 讀取文件內容, 結果用data:url的字符串形式表示
readAsText file,[encoding] 將文件讀取為文本
readAsText：該方法有兩個參數, 其中第二個參數是文本的編碼方式, 默認值為 UTF-8。這個方法非常容易理解, 將文件以文本方式讀取, 讀取的結果即是這個文本文件中的內容。
readAsText(file,encoding)可按指定編碼方式讀取文件, 但讀取文件的單位是字符, 故對于文本文件, 只要按規定的編碼方式讀取即可; 而對于媒體文件(圖片、音頻、視頻),
其內部組成并不是按字符排列, 故采用readAsText讀取, 會產生亂碼, 因此不是最理想的讀取文件的方式。
readAsBinaryString：該方法將文件讀取為二進制字符串, 通常我們將它傳送到后端, 后端可以通過這段字符串存儲文件。
readAsDataURL：這是例子程序中用到的方法, 該方法將文件讀取為一段以 data: 開頭的字符串, 這段字符串的實質就是 Data URL, Data URL是一種將小文件直接嵌入文檔的方案。
這里的小文件通常是指圖像與 html 等格式的文件。控制臺為當前所傳文件的base64編碼表示。
由于媒體文件的src屬性, 可以通過采用網絡地址或base64的方式顯示，因此我們可以利用readAsDataURL實現對圖片的預覽。
3.處理事件
FileReader 包含了一整套完成的事件模型，用于捕獲讀取文件時的狀態,下面這個表格歸納了這些事件。
事件 描述
onabort 中斷時觸發
onerror 出錯時觸發
onload 文件讀取成功完成時觸發
onloadend 讀取完成時觸發，無論讀取成功或失敗
onloadstart 讀取開始時觸發
onprogress 讀取中
result 返回文件的內容。只有在讀取操作完成后，此屬性才有效，返回的數據的格式取決于是使用哪種讀取方法來執行讀取操作的。
readyState 提供 FileReader 讀取操作時的當前狀態。
家好，我是 Echa。
好久沒跟粉絲們細聊JavaScript那點事了。做一名全棧工程師，JS基礎還是要打牢，這樣的話不管底層業務邏輯以及第三方框架怎么變化，都離不開基礎。本文文章屬于基礎篇，閱讀有點乏味枯燥，但一定能學到知識。創作不易，喜歡的老鐵們加個關注，點個贊，后面會持續更新干貨，速速收藏，謝謝！
JavaScript 提供了一些 API 來處理文件或原始文件數據，例如：File、Blob、FileReader、ArrayBuffer、base64 等。下面就來看看它們都是如何使用的，它們之間又有何區別和聯系！
上面的這個圖是在線工具畫的，打開就可以用的網址如下：
https://excalidraw.com/
Blob 全稱為 binary large object ，即二進制大對象，它是 JavaScript 中的一個對象，表示原始的類似文件的數據。下面是 MDN 中對 Blob 的解釋：
Blob 對象表示一個不可變、原始數據的類文件對象。它的數據可以按文本或二進制的格式進行讀取，也可以轉換成 ReadableStream 來用于數據操作。
實際上，Blob 對象是包含有只讀原始數據的類文件對象。簡單來說，Blob 對象就是一個不可修改的二進制文件。
可以使用 Blob() 構造函數來創建一個 Blob：
new Blob(array, options);
其有兩個參數：
常見的 MIME 類型如下：
下面來看一個簡單的例子：
const blob=new Blob(["Hello World"], {type: "text/plain"});
這里可以成為動態文件創建，其正在創建一個類似文件的對象。這個 blob 對象上有兩個屬性：
下面來看打印結果：
const blob=new Blob(["Hello World"], {type: "text/plain"});
console.log(blob.size); // 11
console.log(blob.type); // "text/plain"
注意，字符串"Hello World"是 UTF-8 編碼的，因此它的每個字符占用 1 個字節。
到現在，Blob 對象看起來似乎我們還是沒有啥用。那該如何使用 Blob 對象呢？可以使用 URL.createObjectURL() 方法將將其轉化為一個 URL，并在 Iframe 中加載：
<iframe></iframe>
const iframe=document.getElementsByTagName("iframe")[0];
const blob=new Blob(["Hello World"], {type: "text/plain"});
iframe.src=URL.createObjectURL(blob);
除了使用Blob()構造函數來創建blob 對象之外，還可以從 blob 對象中創建blob，也就是將 blob 對象切片。Blob 對象內置了 slice() 方法用來將 blob 對象分片，其語法如下：
const blob=instanceOfBlob.slice([start [, end [, contentType]]]};
其有三個參數：
下面來看例子：
const iframe=document.getElementsByTagName("iframe")[0];
const blob=new Blob(["Hello World"], {type: "text/plain"});
const subBlob=blob.slice(0, 5);
iframe.src=URL.createObjectURL(subBlob);
此時頁面會顯示"Hello"。
文件（File）接口提供有關文件的信息，并允許網頁中的 JavaScript 訪問其內容。實際上，File 對象是特殊類型的 Blob，且可以用在任意的 Blob 類型的 context 中。Blob 的屬性和方法都可以用于 File 對象。
注意：File 對象中只存在于瀏覽器環境中，在 Node.js 環境中不存在。
在 JavaScript 中，主要有兩種方法來獲取 File 對象：
首先定義一個輸入類型為 file 的 input 標簽：
<input type="file" id="fileInput" multiple="multiple">
這里給 input 標簽添加了三個屬性：
下面來給 input 標簽添加 onchange 事件，當選擇文件并上傳之后觸發：
const fileInput=document.getElementById("fileInput");
fileInput.onchange=(e)=> {
console.log(e.target.files);
}
當點擊上傳文件時，控制臺就會輸出一個 FileList 數組，這個數組的每個元素都是一個 File 對象，一個上傳的文件就對應一個 File 對象：
每個 File 對象都包含文件的一些屬性，這些屬性都繼承自 Blob 對象：
通常，我們在上傳文件時，可以通過對比 size 屬性來限制文件大小，通過對比 type 來限制上傳文件的格式等。
另一種獲取 File 對象的方式就是拖放 API，這個 API 很簡單，就是將瀏覽器之外的文件拖到瀏覽器窗口中，并將它放在一個成為拖放區域的特殊區域中。拖放區域用于響應放置操作并從放置的項目中提取信息。這些是通過 ondrop 和 ondragover 兩個 API 實現的。
下面來看一個簡單的例子，首先定義一個拖放區域：
<div id="drop-zone"></div>
然后給這個元素添加 ondragover 和 ondrop 事件處理程序：
const dropZone=document.getElementById("drop-zone");
dropZone.ondragover=(e)=> {
e.preventDefault();
}
dropZone.ondrop=(e)=> {
e.preventDefault();
const files=e.dataTransfer.files;
console.log(files)
}
注意：這里給兩個 API 都添加了 e.preventDefault()，用來阻止默認事件。它是非常重要的，可以用來阻止瀏覽器的一些默認行為，比如放置文件將顯示在瀏覽器窗口中。
當拖放文件到拖放區域時，控制臺就會輸出一個 FileList 數組，該數組的每一個元素都是一個 File 對象。這個 FileList 數組是從事件參數的 dataTransfer 屬性的 files 獲取的：
可以看到，這里得到的 File 對象和通過 input 標簽獲得的 File 對象是完全一樣的。
FileReader 是一個異步 API，用于讀取文件并提取其內容以供進一步使用。FileReader 可以將 Blob 讀取為不同的格式。
注意：FileReader 僅用于以安全的方式從用戶（遠程）系統讀取文件內容，不能用于從文件系統中按路徑名簡單地讀取文件。
可以使用 FileReader 構造函數來創建一個 FileReader 對象：
const reader=new FileReader();
這個對象常用屬性如下：
FileReader 對象提供了以下方法來加載文件：
可以看到，上面這些方法都接受一個要讀取的 blob 對象作為參數，讀取完之后會將讀取的結果放入對象的 result 屬性中。
FileReader 對象常用的事件如下：
當然，這些方法可以加上前置 on 后在HTML元素上使用，比如onload、onerror、onabort、onprogress。除此之外，由于FileReader對象繼承自EventTarget，因此還可以使用 addEventListener() 監聽上述事件。
下面來看一個簡單的例子，首先定義一個 input 輸入框用于上傳文件：
<input type="file" id="fileInput">
接下來定義 input 標簽的 onchange 事件處理函數和FileReader對象的onload事件處理函數：
const fileInput=document.getElementById("fileInput");
const reader=new FileReader();
fileInput.onchange=(e)=> {
reader.readAsText(e.target.files[0]);
}
reader.onload=(e)=> {
console.log(e.target.result);
}
這里，首先創建了一個 FileReader 對象，當文件上傳成功時，使用 readAsText() 方法讀取 File 對象，當讀取操作完成時打印讀取結果。
使用上述例子讀取文本文件時，就是比較正常的。如果讀取二進制文件，比如png格式的圖片，往往會產生亂碼，如下：
那該如何處理這種二進制數據呢？readAsDataURL() 是一個不錯的選擇，它可以將讀取的文件的內容轉換為 base64 數據的 URL 表示。這樣，就可以直接將 URL 用在需要源鏈接的地方，比如 img 標簽的 src 屬性。
對于上述例子，將 readAsText 方法改為 readAsDataURL()：
const fileInput=document.getElementById("fileInput");
const reader=new FileReader();
fileInput.onchange=(e)=> {
reader.readAsDataURL(e.target.files[0]);
}
reader.onload=(e)=> {
console.log(e.target.result);
}
這時，再次上傳二進制圖片時，就會在控制臺打印一個 base64 編碼的 URL，如下：
下面來修改一下這個例子，將上傳的圖片通過以上方式顯示在頁面上：
<input type="file" id="fileInput" />
<img id="preview" />
const fileInput=document.getElementById("fileInput");
const preview=document.getElementById("preview");
const reader=new FileReader();
fileInput.onchange=(e)=> {
reader.readAsDataURL(e.target.files[0]);
};
reader.onload=(e)=> {
preview.src=e.target.result;
console.log(e.target.result);
};
當上傳大文件時，可以通過 progress 事件來監控文件的讀取進度：
const reader=new FileReader();
reader.onprogress=(e)=> {
if (e.loaded && e.total) {
const percent=(event.loaded / event.total) * 100;
console.log(`上傳進度: ${Math.round(percent)} %`);
}
});
progress 事件提供了兩個屬性：loaded（已讀取量）和total（需讀取總量）。
ArrayBuffer 對象用來表示通用的、固定長度的原始二進制數據緩沖區。ArrayBuffer 的內容不能直接操作，只能通過 DataView 對象或 TypedArrray 對象來訪問。這些對象用于讀取和寫入緩沖區內容。
ArrayBuffer 本身就是一個黑盒，不能直接讀寫所存儲的數據，需要借助以下視圖對象來讀寫：
TypedArray視圖和 DataView視圖的區別主要是字節序，前者的數組成員都是同一個數據類型，后者的數組成員可以是不同的數據類型。
那 ArrayBuffer 與 Blob 有啥區別呢？根據 ArrayBuffer 和 Blob 的特性，Blob 作為一個整體文件，適合用于傳輸；當需要對二進制數據進行操作時（比如要修改某一段數據時），就可以使用 ArrayBuffer。
下面來看看 ArrayBuffer 有哪些常用的方法和屬性。
ArrayBuffer 可以通過以下方式生成：
new ArrayBuffer(bytelength)
ArrayBuffer()構造函數可以分配指定字節數量的緩沖區，其參數和返回值如下：
ArrayBuffer 實例上有一個 byteLength 屬性，它是一個只讀屬性，表示 ArrayBuffer 的 byte 的大小，在 ArrayBuffer 構造完成時生成，不可改變。來看例子：
const buffer=new ArrayBuffer(16);
console.log(buffer.byteLength); // 16
ArrayBuffer 實例上還有一個 slice 方法，該方法可以用來截取 ArrayBuffer 實例，它返回一個新的 ArrayBuffer ，它的內容是這個 ArrayBuffer 的字節副本，從 begin（包括），到 end（不包括）。來看例子：
const buffer=new ArrayBuffer(16);
console.log(buffer.slice(0, 8)); // 16
這里會從 buffer 對象上將前8個字節生成一個新的ArrayBuffer對象。這個方法實際上有兩步操作，首先會分配一段指定長度的內存，然后拷貝原來ArrayBuffer對象的置頂部分。
ArrayBuffer 上有一個 isView()方法，它的返回值是一個布爾值，如果參數是 ArrayBuffer 的視圖實例則返回 true，例如類型數組對象或 DataView 對象；否則返回 false。簡單來說，這個方法就是用來判斷參數是否是 TypedArray 實例或者 DataView 實例：
const buffer=new ArrayBuffer(16);
ArrayBuffer.isView(buffer) // false
const view=new Uint32Array(buffer);
ArrayBuffer.isView(view) // true
TypedArray 對象一共提供 9 種類型的視圖，每一種視圖都是一種構造函數。如下：
元素類型化數組字節描述Int8Int8Array18 位有符號整數Uint8Uint8Array18 位無符號整數Uint8CUint8ClampedArray18 位無符號整數Int16Int16Array216 位有符號整數Uint16Uint16Array216 位無符號整數Int32Int32Array432 位有符號整數Uint32Uint32Array432 位無符號整數Float32Float32Array432 位浮點Float64Float64Array864 位浮點
來看看這些都是什么意思：
這些構造函數生成的對象統稱為 TypedArray 對象。它們和正常的數組很類似，都有length屬性，都能用索引獲取數組元素，所有數組的方法都可以在類型化數組上面使用。
那類型化數組和數組有什么區別呢？
下面來看看 TypedArray 都有哪些常用的方法和屬性。
TypedArray 的語法如下（TypedArray只是一個概念，實際使用的是那9個對象）：
new Int8Array(length);
new Int8Array(typedArray);
new Int8Array(object);
new Int8Array(buffer [, byteOffset [, length]]);
可以看到，TypedArray 有多種用法，下面來分別看一下。
let view=new Int8Array(16);
view[0]=10;
view[10]=6;
console.log(view);
輸出結果如下：
這里就生成了一個 16個元素的 Int8Array 數組，除了手動賦值的元素，其他元素的初始值都是 0。
const view=new Int8Array(new Uint8Array(6));
view[0]=10;
view[3]=6;
console.log(view);
輸出結果如下：
const view=new Int8Array([1, 2, 3, 4, 5]);
view[0]=10;
view[3]=6;
console.log(view);
輸出結果如下：
需要注意，TypedArray視圖會開辟一段新的內存，不會在原數組上建立內存。當然，這里創建的類型化數組也能轉換回普通數組：
Array.prototype.slice.call(view); // [10, 2, 3, 6, 5]
這種方式有三個參數，其中第一個參數是一個ArrayBuffer對象；第二個參數是視圖開始的字節序號，默認從0開始，可選；第三個參數是視圖包含的數據個數，默認直到本段內存區域結束。
const buffer=new ArrayBuffer(8);
const view1=new Int32Array(buffer);
const view2=new Int32Array(buffer, 4);
console.log(view1, view2);
輸出結果如下：
每種視圖的構造函數都有一個 BYTES_PER_ELEMENT 屬性，表示這種數據類型占據的字節數：
Int8Array.BYTES_PER_ELEMENT // 1
Uint8Array.BYTES_PER_ELEMENT // 1
Int16Array.BYTES_PER_ELEMENT // 2
Uint16Array.BYTES_PER_ELEMENT // 2
Int32Array.BYTES_PER_ELEMENT // 4
Uint32Array.BYTES_PER_ELEMENT // 4
Float32Array.BYTES_PER_ELEMENT // 4
Float64Array.BYTES_PER_ELEMENT // 8
BYTES_PER_ELEMENT 屬性也可以在類型化數組的實例上獲取：
const buffer=new ArrayBuffer(16);
const view=new Uint32Array(buffer);
console.log(Uint32Array.BYTES_PER_ELEMENT); // 4
TypedArray 實例的 buffer 屬性會返回內存中對應的 ArrayBuffer對象，只讀屬性。
const a=new Uint32Array(8);
const b=new Int32Array(a.buffer);
console.log(a, b);
輸出結果如下：
TypeArray 實例的 slice方法可以返回一個指定位置的新的 TypedArray實例。
const view=new Int16Array(8);
console.log(view.slice(0 ,5));
輸出結果如下：
const view=new Int16Array(8);
view.length; // 8
view.byteLength; // 16
說完 ArrayBuffer，下面來看看另一種操作 ArrayBuffer 的方式：DataView。DataView 視圖是一個可以從 二進制 ArrayBuffer 對象中讀寫多種數值類型的底層接口，使用它時，不用考慮不同平臺的字節序問題。
DataView視圖提供更多操作選項，而且支持設定字節序。本來，在設計目的上，ArrayBuffer對象的各種TypedArray視圖，是用來向網卡、聲卡之類的本機設備傳送數據，所以使用本機的字節序就可以了；而DataView視圖的設計目的，是用來處理網絡設備傳來的數據，所以大端字節序或小端字節序是可以自行設定的。
DataView視圖可以通過構造函數來創建，它的參數是一個ArrayBuffer對象，生成視圖。其語法如下：
new DataView(buffer [, byteOffset [, byteLength]])
其有三個參數：
來看一個例子：
const buffer=new ArrayBuffer(16);
const view=new DataView(buffer);
console.log(view);
打印結果如下：
DataView 實例有以下常用屬性：
const buffer=new ArrayBuffer(16);
const view=new DataView(buffer);
view.buffer;
view.byteLength;
view.byteOffset;
打印結果如下：
DataView 實例提供了以下方法來讀取內存，它們的參數都是一個字節序號，表示開始讀取的字節位置：
下面來看一個例子：
const buffer=new ArrayBuffer(24);
const view=new DataView(buffer);
// 從第1個字節讀取一個8位無符號整數
const view1=view.getUint8(0);
// 從第2個字節讀取一個16位無符號整數
const view2=view.getUint16(1);
// 從第4個字節讀取一個16位無符號整數
const view3=view.getUint16(3);
DataView 實例提供了以下方法來寫入內存，它們都接受兩個參數，第一個參數表示開始寫入數據的字節序號，第二個參數為寫入的數據：
Object URL（MDN定義名稱）又稱Blob URL（W3C定義名稱），是HTML5中的新標準。它是一個用來表示File Object 或Blob Object 的URL。在網頁中，我們可能會看到過這種形式的 Blob URL：
其實 Blob URL/Object URL 是一種偽協議，允許將 Blob 和 File 對象用作圖像、二進制數據下載鏈接等的 URL 源。
對于 Blob/File 對象，可以使用 URL構造函數的 createObjectURL() 方法創建將給出的對象的 URL。這個 URL 對象表示指定的 File 對象或 Blob 對象。我們可以在<img>、<script> 標簽中或者 <a> 和 <link> 標簽的 href 屬性中使用這個 URL。
來看一個簡單的例子，首先定義一個文件上傳的 input 和一個 圖片預覽的 img：
<input type="file" id="fileInput" />
<img id="preview" />
再來使用 URL.createObjectURL() 將File 對象轉化為一個 URL：
const fileInput=document.getElementById("fileInput");
const preview=document.getElementById("preview");
fileInput.onchange=(e)=> {
preview.src=URL.createObjectURL(e.target.files[0]);
console.log(preview.src);
};
可以看到，上傳的圖片轉化成了一個 URL，并顯示在了屏幕上：
那這個 API 有什么意義呢？可以將Blob/File對象轉化為URL，通過這個URL 就可以實現文件下載或者圖片顯示等。
當我們使用createObjectURL()方法創建一個data URL 時，就需要使用revokeObjectURL()方法從內存中清除它來釋放內存。雖然瀏覽器會在文檔卸載時自動釋放 Data URL，但為了提高性能，我們應該使用revokeObjectURL()來手動釋放它。revokeObjectURL()方法接受一個Data URL 作為其參數，返回undefined。下面來看一個例子：
const objUrl=URL.createObjectURL(new File([""], "filename"));
console.log(objUrl);
URL.revokeObjectURL(objUrl);
Base64 是一種基于64個可打印字符來表示二進制數據的表示方法。Base64 編碼普遍應用于需要通過被設計為處理文本數據的媒介上儲存和傳輸二進制數據而需要編碼該二進制數據的場景。這樣是為了保證數據的完整并且不用在傳輸過程中修改這些數據。
在 JavaScript 中，有兩個函數被分別用來處理解碼和編碼 base64 字符串：
btoa("JavaScript") // 'SmF2YVNjcmlwdA=='
atob('SmF2YVNjcmlwdA==') // 'JavaScript'
那 base64 的實際應用場景有哪些呢？其實多數場景就是基于Data URL的。比如，使用toDataURL()方法把 canvas 畫布內容生成 base64 編碼格式的圖片：
const canvas=document.getElementById('canvas');
const ctx=canvas.getContext("2d");
const dataUrl=canvas.toDataURL();
除此之外，還可以使用readAsDataURL()方法把上傳的文件轉為base64格式的data URI，比如上傳頭像展示或者編輯：
<input type="file" id="fileInput" />
<img id="preview" />
const fileInput=document.getElementById("fileInput");
const preview=document.getElementById("preview");
const reader=new FileReader();
fileInput.onchange=(e)=> {
reader.readAsDataURL(e.target.files[0]);
};
reader.onload=(e)=> {
preview.src=e.target.result;
console.log(e.target.result);
};
效果如下，將圖片（二進制數據）轉化為可打印的字符，也便于數據的傳輸：
另外，一些小的圖片都可以使用 base64 格式進行展示，img標簽和background的 url 屬性都支持使用base64 格式的圖片，這樣做也可以減少 HTTP 請求。
看完這些基本的概念，下面就來看看常用格式之間是如何轉換的。
const blob=new Blob([new Uint8Array(buffer, byteOffset, length)]);
const base64=btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));
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 objectUrl=URL.createObjectURL(blob);*請認真填寫需求信息，我們會在24小時內與您取得聯系。
