将图像转换为base64字符串时，等待后仍然返回承诺

Question

我有下面的方法将图像转换为base64字符串

  const toBase64 = file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });

然后我决定像下面这样使用这个功能：

    let base_strings = files.map(async file => {
      let image = await toBase64(file);
      console.dir(image); //this console base string
      return image;
    });

但是当我尝试访问我的 base_string 数组时，我仍然得到如下承诺：

我不确定我做错了什么，我需要能够在数组中获取我的 base64 字符串。

Answer 1

尝试像这样使用Promise.all()：

let base_strings = files.map(file => {
  return toBase64(file);
});

const myImages = await Promise.all(base_strings);

Answer 2

map 函数返回一个数组，你需要像这样使用 Promise.all

await Promise.all(files.map())

Answer 3

async await 不能与 forEach 或 map 一起使用：

let base_strings = files.map(async file => {
    let image = await toBase64(file);
    console.dir(image); //this console base string
    return image;
});

您可以使用simple for loop 做到这一点，但这应该在async 函数中，如下所示：

const getFiles = async (files) => {
    const base_strings = [];
    for(let i=0;i<files.length; i++) {
        let image = await toBase64(file);
        console.dir(image); //this console base string
        base_strings.push(image);
    }
    return base_strings;
}