如何在变量中获取Base64字符串？代码实现遇阻求助

嘿，我懂你这会儿的困扰——明明alert能弹出Base64字符串，却死活存不到base64变量里，对吧？核心问题出在异步操作的时序上，我来给你掰扯清楚，再给你俩可行的解决方案。

先搞懂为啥存不上 #

你的getBase64函数应该是基于Promise的异步函数（毕竟用了.then()），异步代码的执行顺序是：当你调用getBase64()后，JavaScript会继续往下跑同步代码，不会等Promise完成。所以如果在.then()外面直接访问base64，它还没被赋值呢，自然是undefined。

首先先把你没写完的getBase64补全（标准的FileReader转Base64写法）：

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); // 转换失败抛出错误
  });
}

方案一：在.then()回调里赋值并使用变量 #

这是最直接的写法，把所有需要用到base64的逻辑都放在.then()的回调里，因为只有这里能保证Promise已经完成，变量已经被赋值：

function listarchivos(){
  var base64;
  var selectedFile = document.getElementById("files").files;
  
  // 先判断有没有选文件，避免报错
  if (selectedFile.length === 0) {
    alert("麻烦先选个文件呀～");
    return;
  }
  
  var fileToLoad = selectedFile[0];
  
  getBase64(fileToLoad).then(data => {
    base64 = data; // 在这里赋值，绝对没问题
    console.log("存到变量里的Base64:", base64);
    
    // 所有要用到base64的逻辑都放这儿，比如传给其他函数处理
    handleBase64Data(base64);
  }).catch(error => {
    console.error("转Base64失败啦:", error);
  });
  
  // 注意！这里的代码会比then回调先执行，所以base64还是undefined，别在这儿用！
}

function handleBase64Data(base64Str) {
  // 这里写你处理Base64的逻辑，比如上传、展示图片啥的
  console.log("开始处理Base64:", base64Str);
}

方案二：用async/await让代码更像同步写法 #

如果你觉得回调嵌套看着闹心，可以把listarchivos改成异步函数，用await等待Promise完成，代码逻辑会更清晰：

// 给函数加async关键字，变成异步函数
async function listarchivos(){
  var base64;
  var selectedFile = document.getElementById("files").files;
  
  if (selectedFile.length === 0) {
    alert("先选文件哦～");
    return;
  }
  
  var fileToLoad = selectedFile[0];
  
  try {
    // 用await等待getBase64完成，直接把结果赋值给base64
    base64 = await getBase64(fileToLoad);
    console.log("存到变量里的Base64:", base64);
    handleBase64Data(base64);
  } catch (error) {
    console.error("转Base64失败:", error);
  }
}

function handleBase64Data(base64Str) {
  // 处理逻辑同上
  console.log("开始处理Base64:", base64Str);
}

最后再提醒俩点 #

1. 一定要处理文件未选择的情况，不然当用户没选文件时，selectedFile[0]会报错
2. 别忘了用catch捕获转换失败的异常，比如文件损坏、读取权限问题啥的

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