如何不通过input标签将指定路径文件编码为Base64

首先明确：浏览器端JavaScript无法直接读取本地指定路径的文件，这是浏览器的安全策略限制——为了保护用户本地文件系统的安全，前端脚本只能通过用户主动选择文件（比如<input type="file">）或者浏览器提供的特定授权API来访问本地文件，不能直接通过路径字符串读取。

你的代码存在的问题 #

• FileReader参数错误：FileReader.readAsDataURL()需要传入File或Blob对象，而不是文件路径字符串，直接传路径会触发报错。
• 异步逻辑错误：reader.onload是异步回调函数，你在调用readAsDataURL后立即return base64String，此时回调还未执行，返回的是未定义的值。

可行的替代方案 #

方案1：使用File System Access API（需用户授权） #

这个API允许用户主动授权浏览器访问指定的本地文件或目录，仅支持现代浏览器（Chrome、Edge等），且需在HTTPS环境或localhost下使用：

async function getFileAsBase64() {
  try {
    // 提示用户选择目标文件，可指定起始目录和文件类型
    const handle = await window.showOpenFilePicker({
      startIn: 'desktop',
      types: [
        {
          description: '文本文件',
          accept: {'text/plain': ['.txt']},
        },
      ],
    });
    const file = await handle[0].getFile();
    const reader = new FileReader();
    
    return new Promise((resolve) => {
      reader.onload = () => {
        // 提取纯Base64字符串
        const base64String = reader.result.replace(/^data:.+;base64,/, '');
        resolve(base64String);
      };
      reader.readAsDataURL(file);
    });
  } catch (err) {
    console.error('读取文件失败:', err);
    return null;
  }
}

// 调用示例
getFileAsBase64().then(base64 => {
  console.log('Base64结果:', base64);
});

方案2：通过后端服务读取（最可靠） #

如果必须指定路径读取文件，最稳妥的方式是通过后端代码读取本地文件，再将Base64编码结果返回给前端：

后端示例（Node.js）

const fs = require('fs');
const express = require('express');
const app = express();

app.get('/get-file-base64', (req, res) => {
  const filePath = 'c:\\temp\\file.txt';
  try {
    // 直接读取文件并转为Base64
    const fileBase64 = fs.readFileSync(filePath, { encoding: 'base64' });
    res.send({ base64: fileBase64 });
  } catch (err) {
    res.status(500).send({ error: '读取文件失败' });
  }
});

app.listen(3000, () => {
  console.log('服务运行在http://localhost:3000');
});

前端调用示例

async function fetchFileBase64() {
  const response = await fetch('http://localhost:3000/get-file-base64');
  const data = await response.json();
  console.log('Base64结果:', data.base64);
}

总结 #

• 前端无法绕过安全限制直接通过路径读取本地文件，必须依赖用户授权或后端服务。
• 你的原代码因参数错误和异步逻辑问题无法正常工作，可根据实际场景选择上述方案之一。

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