使用 JavaScript 的 FileReader 读取文件内容（异步/等待）

在 JavaScript 中，FileReader 对象用于读取用户上传的文件。通过 async/await 语法，我们可以以同步的方式处理异步操作，使得代码更易于理解和维护。以下是一个使用 FileReader 和 async/await 的基本示例：
HTML 部分：

<input type='file' id='fileInput' />
<button onclick='readFile()'>读取文件</button>
<div id='output'></div>

JavaScript 部分：

async function readFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0]; // 获取选中的文件
if (file) {
const reader = new FileReader(); // 创建 FileReader 对象
reader.onload = function(e) { // 文件读取完成后执行的回调函数
document.getElementById('output').innerText = e.target.result; // 将文件内容显示在页面上
};
try {
const data = await reader.readAsText(file); // 使用 async/await 读取文件内容
} catch (error) {
console.error('读取文件时出错:', error);
}
} else {
console.error('没有选择文件');
}
}

这个示例中，我们首先通过 getElementById 获取到文件输入框和按钮，然后定义了一个名为 readFile 的异步函数。当用户点击按钮时，该函数会获取选中的文件，并创建一个 FileReader 对象。在 FileReader 的 onload 回调函数中，我们将文件内容显示在页面上。使用 try/catch 语句可以捕获在读取文件过程中可能出现的错误。在 catch 块中，我们将错误信息输出到控制台。
需要注意的是，使用 async/await 时需要将函数声明为异步（通过添加 async 关键字）。在 readFile 函数中，我们通过 await 关键字等待 reader.readAsText(file) 的结果。这样，即使这是一个异步操作，我们也可以像同步操作一样处理它。如果 readAsText 方法抛出错误，那么会跳转到 catch 块中处理错误。如果一切正常，那么会在 onload 回调函数中处理结果。
这个例子是非常基础的，但你可以根据实际需求进行扩展。例如，你可能需要将文件内容发送到服务器进行处理，或者使用不同的方法（如 readAsDataURL）来读取文件。你还可以使用 Promise 和 async/await 来编写更简洁、易读的代码。