不能在其他函数中使用一个函数的结果

Question

我有两个功能

1. convertToBase64(file) 用于转换文件
2. addData(values) 用于发送转换后的文件。 但第二个函数的结果始终是未定义的。如何解决这个问题？

async function convertToBase64(file) {
  const fileReader = new FileReader();
  fileReader.onload = () => {
    const srcData = fileReader.result;
    console.log('scrData: ', srcData);     // result is correct
    return srcData;
  };
  fileReader.readAsDataURL(file);
}

async function addData(values) {
  const converted = await convertToBase64(values.file);
  console.log(converted);       // result undefined
  await addDoc(collection(db, 'list'), {
    image: converted,
  });
}

我尝试过try...catch、async-await函数，但无论如何都找不到解决方案

Answer 1

convertToBase64() 函数不会显式返回值，因此您提供的代码始终返回 undefined 。您可以更改该函数，使其返回一个Promise，一旦resolves " rel="nofollow noreferrer">FileReader 已成功读取 base64 中的文件，并处理任何 rejections 或发生的错误：

const imgFileInput = document.getElementById("img");
imgFileInput.addEventListener("change", addData);

function convertToBase64(file) {
  return new Promise((resolve) => {
    const fileReader = new FileReader();
    fileReader.onload = () => {
      const srcData = fileReader.result;
      resolve(srcData);
    };
    fileReader.onerror = (error) => {
      reject(error);
    };
    fileReader.readAsDataURL(file);
  });
}

async function addData() {
  try {
    const imgFile = imgFileInput.files[0];
    const converted = await convertToBase64(imgFile);
    console.log(converted);
  } catch (error) {
    console.error("Error while converting to Base64:", error);
  }
}