什么是 Blob？
Blob（Binary Large Object，二进制大对象）是Web开发中用于存储二进制数据的对象。在实际开发中，我们经常用它来处理各种大型二进制内容，如图像、音频、视频等文件。Blob对象由字节序列构成，拥有两个重要属性：size（表示数据的字节大小）和type（表示数据的MIME类型）。
创建 Blob 对象
创建Blob对象的基本语法非常简单：
javascript
const blob = new Blob(array, options);参数说明：
array：一个数组，可以包含ArrayBuffer、ArrayBufferView、Blob或DOMString等类型的数据options：可选配置对象，包含：type：指定Blob的MIME类型endings：设置行结束符的处理方式，可选值为'transparent'（保持原样）或'native'（根据平台转换）
示例：创建文本 Blob
javascript
const text = 'Hello, world!';
const blob = new Blob([text], { type: 'text/plain' });
console.log(blob.size); // 输出：13
console.log(blob.type); // 输出：'text/plain'示例：创建图像 Blob
javascript
// 假设我们有一个Uint8Array包含图像数据
const imageData = new Uint8Array([/* 图像字节数据 */]);
const imageBlob = new Blob([imageData], { type: 'image/jpeg' });File 对象详解
File对象继承自Blob，专门用于表示文件。在Web应用中，我们通常通过以下方式获取File对象：
- 用户通过
<input type="file">元素选择的文件 - 用户通过拖放API拖入的文件
除了继承Blob的所有属性和方法外，File对象还提供了几个实用属性：
name：文件名称lastModified：文件最后修改时间的时间戳lastModifiedDate：文件最后修改的日期对象（Date类型）
处理文件输入
通过文件选择框获取文件
html
<input type="file" id="fileInput" multiple>
<script>
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
const files = event.target.files;
for (const file of files) {
console.log('文件名:', file.name);
console.log('类型:', file.type);
console.log('大小:', file.size);
console.log('最后修改时间:', file.lastModified);
}
});
</script>通过拖放功能获取文件
html
<div id="dropZone" style="width: 300px; height: 200px; border: 2px dashed #ccc; text-align: center; line-height: 200px;">
将文件拖放到此处
</div>
<script>
const dropZone = document.getElementById('dropZone');
// 拖入时改变边框颜色
dropZone.addEventListener('dragover', (event) => {
event.preventDefault();
dropZone.style.borderColor = '#000';
});
// 拖离时恢复边框颜色
dropZone.addEventListener('dragleave', () => {
dropZone.style.borderColor = '#ccc';
});
// 放置文件时获取文件信息
dropZone.addEventListener('drop', (event) => {
event.preventDefault();
dropZone.style.borderColor = '#ccc';
const files = event.dataTransfer.files;
for (const file of files) {
console.log('文件名:', file.name);
console.log('类型:', file.type);
}
});
</script>读取 Blob 和 File 内容
使用 FileReader 读取文件
FileReader API 提供了多种方式来读取Blob或File对象的内容：
readAsText()- 将文件内容读取为文本字符串readAsDataURL()- 将文件内容转换为Data URL（适用于图片预览等场景）readAsArrayBuffer()- 将文件内容读取为ArrayBuffer（适合处理二进制数据）readAsBinaryString()- 将文件读取为二进制字符串（已废弃，不推荐使用）
示例：异步读取文本文件
javascript
// 将FileReader封装为Promise，方便使用async/await
function readTextFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsText(file);
});
}
// 使用示例
fileInput.addEventListener('change', async (event) => {
const file = event.target.files[0];
try {
const text = await readTextFile(file);
console.log('文件内容:', text);
} catch (error) {
console.error('读取文件失败:', error);
}
});示例：实现图像预览功能
javascript
// 将图像文件转换为Data URL的工具函数
function previewImage(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
// 使用示例 - 选择图片后立即预览
fileInput.addEventListener('change', async (event) => {
const file = event.target.files[0];
// 确保选择的是图像文件
if (file && file.type.startsWith('image/')) {
try {
const dataURL = await previewImage(file);
const img = document.createElement('img');
img.src = dataURL;
img.style.maxWidth = '300px';
document.body.appendChild(img);
} catch (error) {
console.error('预览图像失败:', error);
}
}
});使用 URL.createObjectURL
URL.createObjectURL()方法可以为Blob或File对象创建一个临时URL。这个特性在很多场景下都非常有用，比如在浏览器中显示本地图片或提供文件下载链接。
示例：通过 object URL 高效显示图像
javascript
function displayImageWithObjectURL(file) {
// 创建临时URL
const objectURL = URL.createObjectURL(file);
const img = document.createElement('img');
img.src = objectURL;
img.style.maxWidth = '300px';
// 图片加载完成后，记得释放URL资源
img.onload = () => {
URL.revokeObjectURL(objectURL);
};
document.body.appendChild(img);
}示例：创建文件下载链接
javascript
function createDownloadLink(file, filename) {
// 为文件创建临时URL
const objectURL = URL.createObjectURL(file);
const link = document.createElement('a');
link.href = objectURL;
link.download = filename || file.name; // 指定下载文件名
link.textContent = '下载文件';
// 点击下载后清理URL资源
link.onclick = (event) => {
setTimeout(() => {
URL.revokeObjectURL(objectURL);
}, 100);
};
document.body.appendChild(link);
}切片 Blob 数据
Blob对象的slice()方法允许我们创建一个新的Blob对象，只包含原始Blob中的一部分数据。这个功能在处理大型文件或实现分块上传时特别有用。
javascript
// 语法
const newBlob = blob.slice(start, end, contentType);参数说明：
start：切片的起始字节位置（可选，默认为0）end：切片的结束字节位置（可选，默认为Blob的总大小）contentType：新Blob的MIME类型（可选，不指定则保持与原Blob相同）
示例：实现文件分块上传
javascript
// 分块上传文件函数
async function uploadFileInChunks(file, chunkSize = 1024 * 1024) { // 默认每块1MB
const totalChunks = Math.ceil(file.size / chunkSize);
for (let i = 0; i < totalChunks; i++) {
// 计算当前块的起始和结束位置
const start = i * chunkSize;
const end = Math.min(start + chunkSize, file.size);
// 切片获取当前块数据
const chunk = file.slice(start, end);
console.log(`正在上传第 ${i + 1}/${totalChunks} 块, 大小: ${chunk.size} 字节`);
// 上传当前块
await uploadChunk(chunk, i, totalChunks, file.name);
}
}
// 上传单个数据块
async function uploadChunk(chunk, chunkIndex, totalChunks, filename) {
const formData = new FormData();
formData.append('file', chunk, filename);
formData.append('chunkIndex', chunkIndex);
formData.append('totalChunks', totalChunks);
try {
const response = await fetch('/upload-chunk', {
method: 'POST',
body: formData
});
if (!response.ok) {
throw new Error('上传块失败');
}
return await response.json();
} catch (error) {
console.error(`上传第 ${chunkIndex} 块失败:`, error);
throw error;
}
}将 Blob 转换为 File
尽管File对象继承自Blob，但在某些场景下，我们需要将Blob对象转换为File对象，以便添加文件名和修改时间等信息。
javascript
// 将Blob转换为File的工具函数
function blobToFile(blob, filename, options = {}) {
const { lastModified = Date.now() } = options;
return new File([blob], filename, {
type: blob.type,
lastModified
});
}
// 使用示例
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const file = blobToFile(blob, 'hello.txt');
console.log(file instanceof File); // 输出: true
console.log(file.name); // 输出: 'hello.txt'从字符串创建 Blob
javascript
// 从字符串创建Blob的辅助函数
function stringToBlob(str, mimeType = 'text/plain') {
return new Blob([str], { type: mimeType });
}
// 使用示例 - 创建JSON格式的Blob
const jsonBlob = stringToBlob(JSON.stringify({ hello: 'world' }), 'application/json');将 Blob 转换为 ArrayBuffer
javascript
// 将Blob转换为ArrayBuffer的异步函数
function blobToArrayBuffer(blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsArrayBuffer(blob);
});
}
// 使用示例
async function processBinaryData(blob) {
const arrayBuffer = await blobToArrayBuffer(blob);
// 这里可以处理二进制数据
}实用场景示例
1. 动态生成并下载文件
javascript
// 生成文本文件并触发下载
function downloadTextFile(text, filename, mimeType = 'text/plain') {
const blob = new Blob([text], { type: mimeType });
const objectURL = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = objectURL;
link.download = filename;
// 触发点击下载
document.body.appendChild(link);
link.click();
// 清理临时元素和URL
setTimeout(() => {
document.body.removeChild(link);
URL.revokeObjectURL(objectURL);
}, 0);
}
// 示例：下载格式化的JSON文件
downloadTextFile(
JSON.stringify({ name: 'John', age: 30 }, null, 2),
'data.json',
'application/json'
);2. 客户端调整图像大小
javascript
// 异步调整图像大小函数
async function resizeImage(file, maxWidth = 1024, maxHeight = 1024) {
return new Promise((resolve) => {
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = () => {
// 加载完成后释放URL
URL.revokeObjectURL(img.src);
let width = img.width;
let height = img.height;
// 根据最大尺寸按比例调整
if (width > height) {
// 横向图片
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
// 纵向图片
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
// 创建画布并绘制调整后的图像
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
// 将画布内容转换回Blob，再转成File对象返回
canvas.toBlob((blob) => {
if (blob) {
resolve(new File([blob], file.name, { type: file.type }));
}
}, file.type);
};
});
}3. 文件类型验证函数
javascript
// 检查文件类型是否符合要求
function validateFileType(file, allowedTypes) {
const fileType = file.type;
return allowedTypes.some(type => {
// 处理通配符类型，如 'image/*'
if (type.endsWith('/*')) {
return fileType.startsWith(type.slice(0, -2));
}
// 处理具体类型，如 'image/jpeg'
return fileType === type;
});
}
// 使用示例
const allowedTypes = ['image/jpeg', 'image/png', 'image/*'];
const isValid = validateFileType(file, allowedTypes);开发最佳实践
-
及时释放对象URL ：
URL.createObjectURL()创建的URL会占用浏览器内存，使用完毕后务必调用URL.revokeObjectURL()释放资源。 -
大文件处理采用分块策略 ：处理大型文件时，利用
slice()方法分块处理，可有效避免内存溢出问题。 -
严格验证文件类型和大小：接收用户上传的文件时，务必验证文件类型和大小，提升应用安全性。
-
完善的错误处理机制：文件操作可能因各种原因失败，务必实现全面的错误捕获和处理逻辑。
-
优先使用异步API：文件处理属于I/O密集型操作，使用异步方法可避免阻塞主线程，保证页面响应性。
浏览器兼容性
Blob和File API在所有现代浏览器中都得到了良好支持，但在处理一些边缘情况或需要兼容旧版浏览器时，建议查阅具体API的兼容性表格。对于较老的浏览器，可能需要使用polyfill或其他替代方案来保证功能正常。
总结
Blob和File API为Web应用开发提供了强大的客户端文件处理能力。借助这些API，开发者可以轻松实现创建、读取、修改和管理二进制数据的功能。无论是处理用户上传的文件、生成动态内容，还是实现文件分块上传等高级功能，Blob和File API都能胜任。
在实际开发中，将Blob和File API与Fetch API、Canvas API等技术结合使用，可以构建出功能更丰富、用户体验更佳的Web应用程序。
|----------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|
| 
| 更多 JavaScript 基础知识的学习，可以学习我写的这本 《JavaScript 语言编程进阶》 小册。 |