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);
  }
}