如何在Electron、Node.js或HTML/JavaScript中获取GUI选中文件夹的绝对路径

嘿，我来帮你解决这个问题！在Windows平台的Electron应用里获取目录的完整路径，核心就是用Electron内置的dialog模块——它能调用系统原生的文件选择器，直接拿到完整路径，不像普通HTML的input受限于浏览器安全规则只能拿到名称。

下面给你两种可行的方案，你可以根据自己的Electron版本和安全需求来选：

方案1：渲染进程直接调用（适合开发阶段/信任场景） #

如果你的应用是内部使用或者开发测试阶段，可以直接在渲染进程里通过remote模块调用dialog：

首先，确保主进程创建窗口时的webPreferences配置正确：

// main.js 主进程代码
const { BrowserWindow } = require('electron');
const path = require('path');

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true // 开启remote模块支持
  }
});

mainWindow.loadFile(path.join(__dirname, 'index.html'));

然后在渲染进程（比如index.html里的脚本）中绑定按钮事件：

// 渲染进程代码，用jQuery绑定点击
$('#select-dir-btn').click(async () => {
  const { dialog } = require('electron').remote;
  
  // 调用系统目录选择器
  const selectionResult = await dialog.showOpenDialog({
    properties: ['openDirectory'] // 明确指定选择目录
  });

  // 判断用户是否取消选择
  if (!selectionResult.canceled && selectionResult.filePaths.length > 0) {
    const fullDirectoryPath = selectionResult.filePaths[0];
    console.log('选中的完整路径：', fullDirectoryPath);
    // 把路径显示到页面上，比如填充到input框
    $('#dir-path-input').val(fullDirectoryPath);
  }
});

方案2：IPC通信（新版Electron推荐，更安全） #

如果你的Electron版本比较新（14+），remote模块已经被标记为废弃，推荐用IPC（进程间通信）的方式，这种方式也更符合Electron的安全规范：

1. 主进程配置（main.js）

const { app, BrowserWindow, dialog, ipcMain } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 预加载脚本
      contextIsolation: true, // 开启上下文隔离，提升安全性
      nodeIntegration: false // 关闭Node集成
    }
  });

  mainWindow.loadFile(path.join(__dirname, 'index.html'));
}

// 监听渲染进程的目录选择请求
ipcMain.handle('request-select-directory', async () => {
  const result = await dialog.showOpenDialog({
    properties: ['openDirectory']
  });

  return result.canceled ? null : result.filePaths[0];
});

app.whenReady().then(createWindow);

2. 预加载脚本（preload.js）

这个脚本用来在主进程和渲染进程之间建立安全的通信桥：

const { contextBridge, ipcRenderer } = require('electron');

// 向渲染进程暴露安全的API
contextBridge.exposeInMainWorld('electronDialog', {
  selectDirectory: () => ipcRenderer.invoke('request-select-directory')
});

3. 渲染进程代码（index.html）

// 用jQuery绑定按钮点击事件
$('#select-dir-btn').click(async () => {
  const fullPath = await window.electronDialog.selectDirectory();
  if (fullPath) {
    console.log('选中的目录完整路径：', fullPath);
    $('#dir-path-input').val(fullPath);
  } else {
    console.log('用户取消了选择');
  }
});

为什么之前只能拿到目录名称？ #

普通HTML的<input type="file" webkitdirectory>因为浏览器的安全限制，只能返回文件/目录的名称，而Electron的dialog模块是调用系统原生对话框，不受这个限制，所以能直接获取完整的本地路径。

记得根据你的Electron版本调整配置，比如新版里enableRemoteModule默认是关闭的，所以优先用IPC方案哦！

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