如何从PDF文件输入获取Base64字符串？解决函数无法返回值存变量问题

你的问题核心在于FileReader是异步操作——reader.readAsDataURL(file)不会立刻完成，onload回调是等文件读取完毕后才触发的。你在onload里的return只是给回调函数自身的返回值，根本传不到外层的getBase64函数里，所以外部的base64变量自然拿不到结果。

这里有两种常用的解决思路，你可以根据自己的编码习惯选择：

方法1：使用Promise（推荐现代写法） #

把getBase64改成返回Promise对象，这样就能用await或者.then()来优雅地获取异步结果：

<input type="file" id="files" name="files" multiple accept=".pdf"> <!-- 加上accept限制仅接受PDF -->

// 重写getBase64为返回Promise的函数
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result); // 读取成功时返回Base64
    reader.onerror = error => reject(error); // 读取失败时抛出错误
  });
}

// 方式A：用async/await（需要在async函数内执行）
async function handleSelectedFile() {
  const file = document.getElementById('files').files[0];
  if (!file) return; // 先判断是否选中了文件
  try {
    const base64 = await getBase64(file);
    console.log(base64); // 这里就能拿到正确的Base64字符串了
    // 接下来可以把base64存入变量做后续操作
  } catch (error) {
    console.error('文件读取失败:', error);
  }
}

// 方式B：用.then()链式调用（适合不需要async函数的场景）
document.getElementById('files').addEventListener('change', () => {
  const file = document.getElementById('files').files[0];
  if (!file) return;
  getBase64(file)
    .then(base64 => {
      console.log(base64);
      // 存入变量或执行其他业务逻辑
    })
    .catch(error => console.error('读取失败:', error));
});

方法2：使用回调函数（传统异步写法） #

如果你更习惯传统的回调模式，也可以给getBase64传入一个回调函数，在读取完成后调用它传递结果：

function getBase64(file, callback) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => callback(null, reader.result); // 成功时传递结果
  reader.onerror = error => callback(error); // 失败时传递错误
}

// 使用示例
document.getElementById('files').addEventListener('change', () => {
  const file = document.getElementById('files').files[0];
  if (!file) return;
  getBase64(file, (error, base64) => {
    if (error) {
      console.error('读取失败:', error);
      return;
    }
    console.log(base64);
    // 这里可以把base64存入变量
  });
});

另外建议给input标签加上accept=".pdf"，这样用户打开文件选择器时只会显示PDF文件，更贴合你的需求。

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