講解前端中 File、Blob、ArrayBuffer、Base64、DataURL
作者：林三心不學(xué)挖掘機(jī)
我們一起聊聊前端中 File、Blob、ArrayBuffer、Base64、DataURL，你會(huì)發(fā)現(xiàn)什么？
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~
1. File
本質(zhì)： 繼承自Blob，表示用戶文件系統(tǒng)中的文件
特性：
const file = new File(['content'], 'demo.txt', {
type: 'text/plain',
lastModified: Date.now()
});
console.log(file.name); // 'demo.txt'
console.log(file.size); // 7 (字節(jié))
console.log(file.type); // 'text/plain'2. Blob (Binary Large Object)
作用： 存儲(chǔ)二進(jìn)制數(shù)據(jù)的容器
創(chuàng)建方法：
// 從字符串創(chuàng)建
const blob1 = new Blob(['Hello World'], { type: 'text/plain' });
// 從ArrayBuffer創(chuàng)建
const buffer = new ArrayBuffer(8);
const blob2 = new Blob([buffer]);
// 合并Blob
const combined = new Blob([blob1, blob2]);3. FileReader
核心方法：
const reader = new FileReader();
reader.onload = (e) => {
console.log(e.target.result);
};
reader.readAsText(blob); // 讀取為文本
reader.readAsArrayBuffer(blob); // 讀取為ArrayBuffer
reader.readAsDataURL(blob); // 讀取為DataURL4. ArrayBuffer
特性： 特性：固定長(zhǎng)度的原始二進(jìn)制緩沖區(qū)
操作方式：
const buffer = new ArrayBuffer(16);
const view = new Uint8Array(buffer);
view[0] = 255;
console.log(view); // Uint8Array [255, 0, 0, ...]5. Base64
編碼原理： 每3字節(jié)轉(zhuǎn)換為4個(gè)ASCII字符
轉(zhuǎn)換示例：
// 文本轉(zhuǎn)Base64
btoa('Hello'); // 'SGVsbG8='
// Base64轉(zhuǎn)文本
atob('SGVsbG8='); // 'Hello'6. DataURL
格式： data:[<mediatype>][;base64],<data>
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...轉(zhuǎn)換關(guān)系大全
1. File ? Blob
// File → Blob
const blob = file.slice(0, file.size, file.type);
// Blob → File
const file = new File([blob], 'filename', { type: blob.type });2. Blob ? ArrayBuffer
// Blob → ArrayBuffer
const reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = () => {
const buffer = reader.result;
};
// ArrayBuffer → Blob
const newBlob = new Blob([buffer]);3. Blob ? DataURL
// Blob → DataURL
const reader = new FileReader();
reader.readAsDataURL(blob);
// DataURL → Blob
function dataURLtoBlob(dataurl) {
const arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = newUint8Array(n);
while(n--) u8arr[n] = bstr.charCodeAt(n);
returnnew Blob([u8arr], { type: mime });
}4. ArrayBuffer ? Base64
// ArrayBuffer → Base64
function arrayBufferToBase64(buffer) {
let binary = '';
const bytes = newUint8Array(buffer);
for (let i = 0; i < bytes.byteLength; i++) {
binary += String.fromCharCode(bytes[i]);
}
return btoa(binary);
}
// Base64 → ArrayBuffer
function base64ToArrayBuffer(base64) {
const binaryString = atob(base64);
const len = binaryString.length;
const bytes = newUint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
return bytes.buffer;
}小結(jié)
類型 | 內(nèi)存占用 | 內(nèi)存占用 | 適用場(chǎng)景 |
Blob | 低 | 快 | 文件存儲(chǔ)/切片上傳 |
ArrayBuffer | 最低 | 最快 | 二進(jìn)制操作/WebSocket傳輸 |
DataURL | 高 | 慢 | 文件存儲(chǔ)/切片上傳 |
Object URL | 中 | 快 | 大文件預(yù)覽 |
責(zé)任編輯：武曉燕
來(lái)源：
前端之神
