从本地文件读取数据：JavaScript FileReader API66

JavaScript FileReader API允许您从本地文件中异步读取数据，包括文本、图像、音频和视频。这在需要处理用户选择的文件或从外部来源加载数据时非常有用。## FileReader API用法
FileReader API包含一个 `FileReader` 对象，这个对象提供了读取文件所需的方法：
1. 创建 FileReader 对象
```js
const reader = new FileReader();
```
2. 监听事件
`FileReader` 对象会触发以下事件：
* `onload`：当文件读取完成时触发。
* `onerror`：当读取文件时出错时触发。
* `onabort`：当读取文件被取消时触发。
3. 读取文件
使用 `readAsText()`、`readAsDataURL()` 或 `readAsArrayBuffer()` 方法读取文件。
```js
(file); // 读取文件内容作为文本
(file); // 读取文件内容作为数据 URL
(file); // 读取文件内容作为 ArrayBuffer
```
4. 获取读取结果
读取文件完成后，可以通过 `result` 属性访问读取的结果：
```js
const text = ; // 获取文本内容
const dataURL = ; // 获取数据 URL
const arrayBuffer = ; // 获取 ArrayBuffer
```
## 读取文本文件
读取文本文件时，您可以使用 `readAsText()` 方法。该方法将文件内容作为文本字符串返回。
```js
const reader = new FileReader();
= function() {
const text = ;
// 使用文本内容...
};
(file);
```
## 读取二进制文件
要读取二进制文件，例如图像或音频文件，可以使用 `readAsArrayBuffer()` 方法。该方法将文件内容作为 `ArrayBuffer` 对象返回。
```js
const reader = new FileReader();
= function() {
const arrayBuffer = ;
// 使用二进制内容...
};
(file);
```
## 读取数据 URL
数据 URL 是包含文件内容的特殊字符串。您可以使用 `readAsDataURL()` 方法将文件内容作为数据 URL 返回。这对于在 HTML 中显示图像或其他文件很有用。
```js
const reader = new FileReader();
= function() {
const dataURL = ;
// 使用数据 URL...
};
(file);
```
## 处理文件错误
如果读取文件时出错，`FileReader` 对象将触发 `onerror` 事件。您可以使用此事件处理文件错误。
```js
= function(error) {
// 处理文件错误...
};
```
## 取消文件读取
您可以使用 `abort()` 方法取消正在进行的文件读取。
```js
();
```
## 总结
JavaScript FileReader API提供了一种方便的方法来从本地文件中读取数据。该 API 可以读取文本、二进制和数据 URL，并允许您处理文件错误和取消读取过程。通过使用 FileReader API，您可以轻松地在 Web 应用程序中处理用户选择的文件。