如何从文件列表中获取 base64 的 json

Question

我得到了文件列表并想使 json 数组像

[
  {"name":"IDCard001.jpg","base64":"data:image/jpeg;base64,/9j/4AA.."},
  {"name":"IDCard002.jpg","base64":"data:image/jpeg;base64,/9j/4AA.."},
]

我的代码：

  const getBase64 = (file: File) => {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => resolve(reader.result as string);
      reader.onerror = (error) => reject(error);
      reader.readAsDataURL(file);
    });
  };

  const handleFiles = (files: Array<File>) => {
    const list = files.map(async (file) => {
      return {
        name: file.name,
        base64: await getBase64(file),
      };
    });
  }

我不能将列表用作简单数组。我如何？

Answer 1

很难确定，但我认为您的问题是您正在地图中执行异步操作，因此您需要确保承诺得到解决。我认为这会解决您的问题。

const handleFiles = async(files: Array<File>) => {
  const list = await Promise.all(files.map(async (file) => {
    return {
      name: file.name,
      base64: await getBase64(file),
    };
  }))
  console.log(list)
}

Answer 2

map() 方法按原样使用函数的 return 值 See map() in MDN。

变量 list 将包含 Promise 列表而不是预期的对象。

你应该用 await Promise.all() 包裹地图见 Promise.all() 在 MDN 中并使函数异步以拥有对象数组。

const handleFiles = async (files: Array<File>) => {
  const list = await Promise.all(files.map(async (file) => {
    return {
      name: file.name,
      base64: await getBase64(file),
    };
  }));
  return list;
}

如何从文件列表中获取 base64 的 json

How to get json of base64 from file list

javascript

promise

async-await

typescript