js实现文件读取
使用FileReader API读取文件内容
FileReader是浏览器提供的API，允许异步读取用户计算机上的文件内容。以下是基本实现方式：
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
const content = e.target.result;
console.log(content);
};
reader.readAsText(file);
});读取不同类型文件的方法
FileReader提供多种读取方式，适用于不同文件类型：
// 读取为文本
reader.readAsText(file);
// 读取为DataURL（Base64编码）
reader.readAsDataURL(file);
// 读取为二进制字符串
reader.readAsBinaryString(file);
// 读取为ArrayBuffer
reader.readAsArrayBuffer(file);处理大文件的分片读取
对于大文件，可采用分片读取策略：
const chunkSize = 1024 * 1024; // 1MB
let offset = 0;
function readChunk() {
const chunk = file.slice(offset, offset + chunkSize);
const reader = new FileReader();
reader.onload = (e) => {
// 处理当前分片数据
offset += chunkSize;
if(offset < file.size) {
readChunk();
}
};
reader.readAsArrayBuffer(chunk);
}监听读取进度
FileReader支持进度事件监听：
reader.onprogress = (event) => {
if(event.lengthComputable) {
const percentLoaded = Math.round((event.loaded / event.total) * 100);
console.log(`${percentLoaded}% loaded`);
}
};
reader.onerror = () => {
console.error('文件读取错误');
};使用Blob对象处理文件
Blob API可直接操作文件数据：
const blob = new Blob(['文件内容'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
// 创建下载链接
const a = document.createElement('a');
a.href = url;
a.download = 'example.txt';
a.click();现代浏览器中的Promise封装
将FileReader封装为Promise更易于使用：
function readFileAsText(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsText(file);
});
}
// 使用方式
readFileAsText(file)
.then(content => console.log(content))
.catch(error => console.error(error));Node.js环境下的文件读取
在Node.js环境中使用fs模块：
const fs = require('fs');
// 同步读取
const content = fs.readFileSync('path/to/file', 'utf8');
// 异步读取
fs.readFile('path/to/file', 'utf8', (err, data) => {
if(err) throw err;
console.log(data);
});
// 使用Promise版本（fs.promises）
async function readFile() {
try {
const data = await fs.promises.readFile('path/to/file', 'utf8');
console.log(data);
} catch(err) {
console.error(err);
}
}
