如何在输入更改后将图像数据作为 base64 传递给全局变量，如异步函数案例中输入字段中发生的那样

Question

我对异步、等待、承诺..范式..这个概念很陌生..请帮助我

我有一个这样的输入框

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

 <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);

但是，如您所想，现代的方法是使用承诺。这将使代码更易于理解，并在您实际发布编码文件时证明是一个更好的决定...

首先将文件 reader 包装在一个 promise 中。 Here's a fine post on the subject，这是妙语（稍微现代化）

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);
}

文件 reader 上的 addEventListener 方法是老派异步的一部分：它说：文件 reader 将在单独的线程上执行 i/o。它会通过调用您指定的函数（即“侦听器”部分）告诉您何时完成（即“事件”部分），将其传递给要调用的函数（即“添加”部分）。

如何在输入更改后将图像数据作为 base64 传递给全局变量，如异步函数案例中输入字段中发生的那样

How to pass image data as base64 to a global variable after the input changes as has happend in an input field in an async function case

javascript

image

vue.js

base64