如何在JavaScript中从多选PDF文件（input type:file）获取Base64字符串

没问题，我来帮你搞定这个需求！你的思路方向是对的，但原代码里有几个关键问题需要修正（比如循环变量作用域、异步操作的处理），下面是完整的实现方案：

核心思路梳理 #

• 借助FileReader的readAsDataURL方法把文件转成Base64格式
• 因为FileReader是异步操作，得确保每个文件的Base64都能被正确捕获
• 用数组来存储多个文件的Base64，方便后续统一使用

完整可运行代码示例 #

// 假设你的input文件选择器id是"files"，用来显示处理状态的div是"selDiv"
const selDiv = document.getElementById("selDiv");

function handleFileSelect(e) {
  // 先清空之前的处理结果
  selDiv.innerHTML = "";
  
  // 检查是否有选中的文件
  if (!e.target.files || e.target.files.length === 0) {
    selDiv.textContent = "没有选中任何文件哦";
    return;
  }

  const files = e.target.files;
  // 用来存储所有PDF的Base64，同时关联文件名方便识别
  const pdfBase64List = [];

  for (let i = 0; i < files.length; i++) {
    const currentFile = files[i];
    // 可选：只处理PDF文件，过滤其他类型
    if (currentFile.type !== "application/pdf") {
      selDiv.innerHTML += `<p>跳过非PDF文件：${currentFile.name}</p>`;
      continue;
    }

    const fileReader = new FileReader();
    
    // 用闭包绑定当前循环的文件，避免异步回调中变量被覆盖
    fileReader.onload = (function(file) {
      return function(loadEvent) {
        const base64Str = loadEvent.target.result;
        // 把当前文件的Base64和文件名存入数组
        pdfBase64List.push({
          filename: file.name,
          base64: base64Str
        });
        
        // 更新UI提示处理进度
        selDiv.innerHTML += `<p>已完成处理：${file.name}</p>`;
        
        // 所有文件处理完成后的操作（可选）
        if (pdfBase64List.length === files.length) {
          console.log("所有PDF文件处理完毕！Base64列表：", pdfBase64List);
          // 这里可以添加后续逻辑，比如上传、本地存储等
        }
      };
    })(currentFile);

    // 开始读取文件为Base64格式
    fileReader.readAsDataURL(currentFile);
  }
}

// 给文件选择器绑定change事件
document.getElementById("files").addEventListener("change", handleFileSelect);

关键细节说明 #

1. 异步操作处理：FileReader的onload是异步触发的，不能在循环结束后直接拿结果，必须在回调函数内部处理每个文件的Base64。
2. 循环变量作用域：原代码用var声明循环变量会导致所有回调共享同一个变量值，这里改用let或者闭包绑定当前文件，确保回调能拿到正确的文件对象。
3. 类型校验：添加了PDF文件类型判断，避免处理非目标文件，你可以根据需求调整或移除这部分。
4. 存储方案：用数组存储每个文件的Base64和文件名，后续遍历、使用这些数据会非常方便。

这样修改后，你就能正确获取所有选中PDF文件的Base64字符串并存入pdfBase64List变量中啦。

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