不能在其他[重复]中使用一个函数的结果

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

函数不会显式return 值，因此您提供的代码总是返回

undefined

。您可以更改函数，使其返回一个 Promise，一旦

FileReader

成功读取 base64 中的文件，它就会返回一个 resolves，并处理任何

reject

ions 或 errors 发生：

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

<input type="file" id="img" />