JavaScript 异步读取文件并转换为 Base64 编码

这段代码展示了如何使用 JavaScript 异步读取文件并将其转换为 Base64 编码。代码中使用 `FileReader` 对象来读取文件，并使用 `Promise` 对象将读取操作封装为异步操作。最后，使用 `async/await` 语法来等待读取操作完成并设置图像的 `src` 属性。

以下是对代码的解释：

1. BASE64 函数

   • 该函数接受一个文件对象作为参数，并返回一个 Promise 对象。
   • 在 Promise 的构造函数中，使用 FileReader 对象来读取文件。
   • 当文件读取成功时，reader.onload 事件触发，resolve 函数被调用并返回 Base64 编码的结果。
   • 当读取失败时，reader.onerror 事件触发，reject 函数被调用并返回错误信息。

2. onchange 事件处理程序

   • 该处理程序被绑定到文件输入元素的 onchange 事件上，当用户选择文件时触发。
   • 使用 async 关键字将该函数声明为异步函数，并使用 await 关键字等待 BASE64 函数返回的 Promise 对象解析结果。
   • 将解析结果（Base64 编码字符串）设置为图像元素的 src 属性。

以下是修复后的代码：

function BASE64(file) {
  return new Promise((resolve, reject) => {
    var reader = new FileReader();
    reader.onload = (e) => {
      resolve(e.target.result);
    };
    reader.onerror = (error) => {
      reject(error);
    };
    reader.readAsDataURL(file);
  });
}

var inp = document.querySelector('input');

inp.onchange = async function() {
  preview.src = await BASE64(inp.files[0]);
};

这样修复后的代码将以异步方式读取文件并返回 Base64 编码的结果。使用 `async/await` 确保在设置 `preview` 元素的 `src` 属性之前获取到正确的结果。