在异步函数的情况下，如何在输入字段发生变化后将图像数据作为base64传递给全局变量

Question

我对异步、等待、承诺的概念很陌生。。范例。。请帮我

我有一个类似的输入字段

我有一个全局变量var base64。如何用基本编码值填充base64全局变量。addEventListener reader.result中的函数内部显示基本编码值。如何将其传递给外部全局变量。我试了很多。。因为它似乎是一个异步函数。。行为似乎是安静的不同，似乎很难赶上，而且我没有得到预期的结果

<input  type="file"  id="photo" accept="image/*" required  @change="UploadPhoto()" />

UploadPhoto((的更改函数为。。｛这是我从mozilla得到的｝

function UploadPhoto() {
const file = document.querySelector('#photo').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// convert image file to base64 string
console.log(reader.result);
}, false);
if (file) {
reader.readAsDataURL(file);
}
}

如果你能解释一下reader.addEventListener和reader.readAsDataURL(file);在异步行为的情况下的工作，我也会很高兴。。我在谷歌上搜索了很多，但找不到一篇详细解释这两个功能的文章。

Answer 1

想要一个全局(在这种情况下(是因为没有它就没有所需的工具。

如果你真的需要一个全球性的，你可以通过这种方式。。。

let b64Encoded;
function UploadPhoto() {
const file = document.querySelector('#photo').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// convert image file to base64 string
b64Encoded = btoa(reader.result);
}, false);

但是，正如你所想的，现代的方式是使用承诺。这将使代码更易于理解，并且当您真正发布编码文件时，将证明这是一个更好的决定。。。

首先用promise包装文件读取器。这是一篇关于这个主题的好文章，这是的笑点(稍微现代化(

async function readAsDataURL(file) {
return new Promise((resolve, reject) => {
const fr = new FileReader();
fr.onerror = reject;
fr.onload = () => {
resolve(fr.result);
}
fr.readAsDataURL(file);
});
}

这样使用：

// we don't need this anymore :-)
// let b64Encoded;
async function UploadPhoto() {
const file = document.querySelector('#photo').files[0];
const result = await readAsDataURL(file);
const b64Encoded = btoa(result);  // stack var, as it should be!
// insert real (promise-based) network code here
return myNetworkLibrary.post(b64Encoded);
}

文件读取器上的addEventListener方法是老式异步的一部分：它说：文件读取器将在一个单独的线程上执行i/o。它会告诉你，当它完成时(这是"事件"部分(，通过调用你指定的函数(那是"监听器"部分(、传递给它一个要调用的函数(即"添加"部分(。