convertToBase64函数结果在addData中始终为undefined，如何解决？

你的问题出在convertToBase64函数的异步处理逻辑上：虽然给函数加了async关键字，但内部并没有返回能拿到转换结果的Promise，导致await无法捕获FileReader的处理结果，最终得到undefined。

原代码：

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

修复方案 #

将convertToBase64改为返回Promise，用resolve传递转换成功的结果，同时补充错误处理逻辑：

function convertToBase64(file) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    
    fileReader.onload = () => {
      const srcData = fileReader.result;
      console.log('scrData: ', srcData);
      resolve(srcData);
    };
    
    // 处理文件读取失败的情况
    fileReader.onerror = (error) => {
      reject(new Error(`文件转换失败: ${error.message}`));
    };
    
    fileReader.readAsDataURL(file);
  });
}

async function addData(values) {
  try {
    const converted = await convertToBase64(values.file);
    console.log(converted);     // 现在能拿到正确结果
    await addDoc(collection(db, 'list'), {
      image: converted,
    });
  } catch (error) {
    console.error('添加数据失败:', error);
  }
}

原因说明 #

• FileReader是基于回调的异步API，原代码中onload回调里的return无法传递到函数外部；而async函数如果没有明确返回值，默认会返回一个状态为resolved、值为undefined的Promise。
• 用Promise包裹后，await会等待Promise状态变为resolved，从而获取到转换后的Base64字符串。
• 补充onerror的错误处理，能在文件读取失败时及时捕获异常，避免程序无响应。

内容的提问来源于stack exchange，提问作者gkj5g4wh4g