为什么首次运行获取上传图片base64的代码返回undefined，该如何修复？

这个问题是异步操作时序不对导致的：
FileReader的readAsDataURL是异步方法，调用后不会立刻完成文件读取，onload回调要等文件读取完毕才会触发。你当前的getBase64函数调用readAsDataURL后直接返回了全局变量result，首次执行时onload还没跑，result没有被赋值，所以返回undefined。
你认为的“后续运行恢复正常”是假象：第二次调用时拿到的是上一次文件读取完成后存入的旧值，并不是本次选中文件的base64，存在严重逻辑错误。

推荐用Promise封装异步读取逻辑，配合async/await使用，是目前最通用的写法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Upload</title>
  </head>
  <body>
    <input type="file" id="file">
    <button id="button" onclick="upload()">Upload</button>
    <script type="text/javascript">
      // 封装Promise形式的读取方法
      function getBase64(file) {
         return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
         })
      }

      // 用async/await等待异步结果返回
      async function upload() {
        const file = document.querySelector('input').files[0];
        if (!file) return;
        try {
          const base64Str = await getBase64(file);
          console.log(base64Str);
          // 后续处理base64的逻辑都写在这里
        } catch (err) {
          console.log('文件读取失败：', err);
        }
      }
    </script>
  </body>
</html>

如果不想用Promise，也可以用回调函数实现：

function getBase64(file, callback) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => callback(null, reader.result);
  reader.onerror = error => callback(error);
}

function upload() {
  const file = document.querySelector('input').files[0];
  if (!file) return;
  getBase64(file, (err, base64Str) => {
    if (err) {
      console.log('文件读取失败：', err);
      return;
    }
    console.log(base64Str);
    // 后续处理逻辑写在这里
  })
}

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