Sie können die Ergebnisse einer Funktion nicht in anderen Funktionen verwenden

Question

Ich habe zwei Funktionen

1. convertToBase64(file) wird zum Konvertieren von Dateien verwendet
2. addData(values) wird zum Senden konvertierter Dateien verwendet. Das Ergebnis der zweiten Funktion ist jedoch immer undefiniert. Wie kann dieses Problem gelöst werden?

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

Ich habe die Funktionen try...catch und async-await ausprobiert, konnte aber trotzdem keine Lösung finden

Answer 1

convertToBase64() 函数不会显式返回值，因此您提供的代码始终返回 undefined 。您可以更改该函数，使其返回一个Promise，一旦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);
  }
}