JavaScript通过File API和FileReader实现浏览器端文件读取，支持文本、二进制和base64格式；利用ReadableStream分块处理大文件避免内存溢出；Node.js中使用fs模块进行文件读写，通过createReadStream和createWriteStream实现流式处理，并结合pipe构建高效数据管道，如压缩、加密等；两者分别侧重安全交互与系统控制，掌握其差异与共通点是实现高效文件操作的关键。
JavaScript 本身出于安全考虑，在浏览器环境中无法直接访问用户的文件系统。但通过现代 Web API，我们可以实现文件的读取、写入与流式处理，尤其是在结合 Node.js 的环境下，能力更加强大。以下是关于 JavaScript 中文件操作与流式处理的核心技术解析。
浏览器中的文件读取：File API 与 FileReader
在浏览器中，用户可以通过 <input type="file"> 选择文件，然后使用 File API 进行处理。
File 接口继承自 Blob，提供了对文件元数据和内容的访问能力。核心工具是 FileReader：
- readAsText(file)：将文件读为文本字符串
- readAsArrayBuffer(file)强>：用于二进制数据处理，适合图像、音频等
- readAsDataURL(file)：生成 base64 编码，常用于预览图片
const input = document.getElementById('fileInput');
input.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
console.log(e.target.result); // 文件内容
};
reader.readAsText(file);
}
});
流式读取大文件：ReadableStream 与分块处理
当处理大文件时，一次性加载到内存会导致性能问题。此时应使用流式处理，逐块读取。
立即学习“Java免费学习笔记（深入）”；
现代浏览器支持通过 file.stream() 获取 ReadableStream，配合异步迭代高效处理：
- 避免内存溢出
- 支持实时处理（如解析 CSV、计算哈希）
async function processLargeFile(file) {
const stream = file.stream();
const reader = stream.getReader();
const decoder = new TextDecoder();
let result = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
result += decoder.decode(value, { stream: true });
// 可在此处做增量处理，如按行解析
}
return result;
}
Node.js 中的文件操作：fs 与 Stream 模块
在 Node.js 环境中，JavaScript 可以真正操作本地文件系统。
fs 模块 提供了同步与异步的文件读写方法：
- fs.readFile / fs.writeFile：适用于小文件
- fs.createReadStream / createWriteStream：用于大文件流式处理
const fs = require('fs');
const readStream = fs.createReadStream('source.mp4');
const writeStream = fs.createWriteStream('copy.mp4');
readStream.on('data', (chunk) => {
writeStream.write(chunk);
});
readStream.on('end', () => {
writeStream.end();
});
// 或更简洁：
// readStream.pipe(writeStream);
流的高级应用：转换与管道链
Node.js 中的 Stream 不仅能读写，还能通过 Transform 流进行数据转换。
常见场景包括压缩、加密、格式转换等：
- 使用 zlib 模块压缩文件
- 构建可复用的数据处理管道
const fs = require('fs');
const zlib = require('zlib');
const readStream = fs.createReadStream('input.txt');
const gzip = zlib.createGzip();
const writeStream = fs.createWriteStream('input.txt.gz');
readStream.pipe(gzip).pipe(writeStream);
基本上就这些。浏览器端侧重安全与用户体验，通过 File API 和流式读取实现高效处理；Node.js 则提供完整的文件系统控制能力，结合 Stream 可构建高性能数据处理流程。理解两者差异与共通点，是掌握 JavaScript 文件操作的关键。不复杂但容易忽略。
