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);
});
总而言之，FileReader 提供了一种方便的方式在前端处理文件，提升用户体验，并减少服务器负载。需要注意的是，为了安全起见，FileReader 只能访问用户明确选择的文件。
