Electron离线应用如何获取选中文件夹的完整目录路径？

一、解决window.showDirectoryPicker()无法获取完整路径的问题 #

Electron渲染进程中的window.showDirectoryPicker()受沙箱机制限制，无法直接返回完整路径，推荐使用Electron官方提供的dialog模块实现需求：

方法1：通过主进程调用dialog（符合安全规范，推荐） #

1. 主进程代码（main.js）：

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

// 注册IPC处理函数，响应渲染进程的选目录请求
ipcMain.handle('select-directory', async () => {
  const result = await dialog.showOpenDialog({
    properties: ['openDirectory']
  })
  if (!result.canceled) {
    return result.filePaths[0] // 返回选中文件夹的完整路径
  }
  return null
})

2. 渲染进程代码：

const { ipcRenderer } = require('electron')

async function pickDirectory() {
  const fullPath = await ipcRenderer.invoke('select-directory')
  if (fullPath) {
    console.log('完整路径:', fullPath)
    // 此处可将路径赋值给页面变量或DOM元素
  }
}

方法2：渲染进程直接调用（不推荐，需关闭沙箱） #

若应用无需沙箱保护，可在创建窗口时修改webPreferences配置：

const mainWindow = new BrowserWindow({
  webPreferences: {
    sandbox: false,
    nodeIntegration: true,
    contextIsolation: false
  }
})

之后在渲染进程中直接调用：

const { dialog } = require('electron').remote
async function pickDirectory() {
  const result = await dialog.showOpenDialog({
    properties: ['openDirectory']
  })
  if (!result.canceled) {
    console.log('完整路径:', result.filePaths[0])
  }
}

二、解决<input type="file">选中文件夹后无法获取路径的问题 #

1. 注意：inpFile.value是只读属性，不能直接赋值，你需要的是读取路径而非修改input的value值。
2. 沙箱环境下需通过IPC从主进程获取路径，非沙箱环境可直接读取：

渲染进程代码（配合IPC） #

<input type="file" id='inpFile' webkitdirectory directory>
<script>
const inpFile = document.getElementById('inpFile')
const { ipcRenderer } = require('electron')

inpFile.addEventListener('change', async (e) => {
  if (e.target.files.length > 0) {
    // 非沙箱环境可直接读取：const fullPath = e.target.files[0].path
    // 沙箱环境通过主进程获取
    const fullPath = await ipcRenderer.invoke('get-file-path', e.target.files[0])
    console.log('文件夹完整路径:', fullPath)
    // 可将路径展示在页面上，例如：document.getElementById('path-display').textContent = fullPath
  }
})
</script>

主进程补充代码 #

ipcMain.handle('get-file-path', async (event, file) => {
  return file.path // 主进程可直接获取文件/文件夹的完整路径
})

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