js中流文件操作方式大盘点！

2024-01-01 14:13:12

在 JavaScript 中操控文件和二进制数据的艺术

在前端开发的浩瀚海洋中，我们经常会遇到需要处理文件和二进制数据的时刻。无论是上传用户文件还是将文件下载到他们的设备上，JavaScript 都为我们提供了强大的 API 来轻松实现这些任务。

FileReader API：探索文件的内部

就像一位经验丰富的探险家，FileReader API 让我们深入文件的内心世界，让我们能够读取其内容。它是异步的，这意味着它不会让主线程等待，而是悄悄地处理文件，同时不会中断其他任务。

要使用 FileReader，只需创建一个 FileReader 对象并调用 readAsText() 或 readAsArrayBuffer() 方法。前者提取文件的内容，而后者则返回二进制数据。代码示例如下：

// 创建一个 FileReader 对象
const reader = new FileReader();

// 读取文本内容
reader.readAsText('myfile.txt');

// 读取二进制数据
reader.readAsArrayBuffer('myfile.bin');

// 监听读取事件
reader.onload = function() {
  // 读取完成后的处理逻辑
};

Blob API：创建和操纵二进制数据

Blob API 是二进制数据的魔术师，允许我们创建和修改这些无形的比特。它生成一个不可变的二进制数据块，可以用于创建文件或在服务器和客户端之间传输数据。

以下是 Blob API 的一个示例：

// 创建一个 Blob 对象
const blob = new Blob(['你好，世界！'], { type: 'text/plain' });

// 将 Blob 保存为文件
saveAs(blob, 'myfile.txt');

// 发送 Blob 到服务器
const xhr = new XMLHttpRequest();
xhr.open('POST', 'myserver.php');
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.send(blob);

URL API：分解网络地址

就像一个熟练的地图绘制者，URL API 让我们解剖 URL，揭示其各个组成部分，如协议、主机名和路径。

// 创建一个 URL 对象
const url = new URL('https://www.example.com');

// 解析 URL
console.log(url.protocol); // https:
console.log(url.hostname); // www.example.com
console.log(url.pathname); // /