Electron中如何从指定文件夹获取文件数组？

我希望获取指定文件夹中的文件并以数组形式返回。已通过dialog.showOpenDialog({properties:['openDirectory']})获取到文件夹路径，但找不到合适的方法获取文件夹内的文件项。尝试使用shell.openPath('path')仅会打开该文件夹的窗口。之后尝试使用Node.js的fs模块，先后使用fs.opendir和fs.readdir，但返回值均为undefined。相关代码如下：

现有代码 #

main.js #

ipcMain.handle("get/folder", () => dialog.showOpenDialog({properties:['openDirectory']}))
// 获取文件夹路径

ipcMain.on("get/item", (event, args) => fs.opendir(args, { encoding: "utf8", bufferSize: 64 }, (err, dir) => {
    if(err) { console.log(err)}
}))
// 从文件夹路径获取文件项

preload.js #

const { ipcRenderer, contextBridge } = require("electron")

const openFolder = {
    GetFolder: () => ipcRenderer.invoke("get/folder"),
    GetItem: (folder) => ipcRenderer.send("get/item", folder) 
}

contextBridge.exposeInMainWorld("api", openFolder)

App.svelte #

async function send() {
    fileFolder = await api.GetFolder()
    path = fileFolder.filePaths[0]
        if (!fileFolder.canceled) {
            files =  await api.GetItem(path)
            console.log(files) // 返回undefined
        }
}

问题出在IPC通信方式和fs模块的使用逻辑上，调整后即可正常获取文件数组：

1. IPC通信改为双向调用：ipcRenderer.send是单向通信，无法将结果返回给渲染进程，必须换成ipcRenderer.invoke搭配主进程的ipcMain.handle实现双向数据传递。
2. 使用Promise版fs模块：回调版的fs方法无法直接将结果返回给渲染进程，改用Promise版本更适配异步场景。

修改后的代码如下：

main.js #

const { ipcMain, dialog } = require('electron');
const fs = require('fs').promises; // 引入Promise版本的fs

// 获取文件夹路径
ipcMain.handle("get/folder", () => dialog.showOpenDialog({properties:['openDirectory']}))

// 获取文件夹内文件数组
ipcMain.handle("get/item", async (event, folderPath) => {
    try {
        // withFileTypes设为true可返回包含文件类型的对象，设为false则仅返回文件名数组，按需选择
        const files = await fs.readdir(folderPath, { withFileTypes: false });
        return files;
    } catch (err) {
        console.error('读取文件夹失败:', err);
        throw err; // 抛出错误让渲染进程捕获
    }
})

preload.js #

const { ipcRenderer, contextBridge } = require("electron")

const openFolder = {
    GetFolder: () => ipcRenderer.invoke("get/folder"),
    GetItem: (folder) => ipcRenderer.invoke("get/item", folder) // 替换为invoke实现双向调用
}

contextBridge.exposeInMainWorld("api", openFolder)

App.svelte #

async function send() {
    const fileFolder = await api.GetFolder();
    if (!fileFolder.canceled) {
        const path = fileFolder.filePaths[0];
        try {
            const files = await api.GetItem(path);
            console.log('文件夹内文件:', files);
        } catch (err) {
            console.error('获取文件失败:', err);
        }
    }
}

关键说明 #

• fs.promises.readdir直接返回文件列表数组，无需手动处理回调逻辑。
• 双向IPC调用确保渲染进程能获取到主进程返回的文件数据。
• 增加错误捕获逻辑，便于排查读取失败的场景。

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