你有使用过FileReader吗？说说它有哪些应用场景？

FileReader 是一个 JavaScript API，用于在浏览器中异步读取文件内容。它允许 Web 应用程序直接与用户的文件系统交互（在用户授权的情况下）。

FileReader 的主要应用场景包括：

预览图片: 用户选择图片文件后，可以使用 FileReader 读取文件内容并将其显示在 <img> 标签中，实现图片上传前的预览功能。这是 FileReader 最常见的应用场景之一。
处理文本文件: 读取文本文件内容，例如 .txt、.csv、.json 等，以便在 JavaScript 中进行处理、分析或显示。例如，可以读取 CSV 文件并将其转换为 JavaScript 数组或对象，或者读取 JSON 文件并将其解析为 JavaScript 对象。
搜索文件内容: 读取文件内容并在其中搜索特定字符串或模式。
读取二进制文件: FileReader 可以读取任意类型的文件，包括二进制文件，例如图像、音频、视频等。读取后的二进制数据可以用于各种用途，例如图像处理、音频解码、视频播放等。可以使用 readAsArrayBuffer() 来获取二进制数据。
自定义文件上传进度: 结合 XMLHttpRequest 或 Fetch API，可以使用 FileReader 读取文件块并在上传过程中计算和显示上传进度。
客户端数据处理: 在客户端处理文件数据，减少服务器负载。例如，可以在客户端对图片进行压缩或裁剪后再上传到服务器。
实现拖放上传: 配合拖放 API，可以实现将文件拖放到网页上进行上传的功能。

一些具体的例子:

图片预览:

const input = document.getElementById('fileInput');
const img = document.getElementById('previewImg');

input.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    img.src = e.target.result;
  };

  reader.readAsDataURL(file);
});

读取文本文件:

const input = document.getElementById('fileInput');

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