不能在其他函數中使用一個函數的結果

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