NodeJS/Electron 同一JS文件中实现文件、目录两个独立选择对话框

架构老林

2026-9-27

问题原因

你的代码核心问题出在3处：

dialog.showOpenDialog 方法参数传递错误：第一个参数应为父窗口实例（无父窗口可传null），对话框标题需要放到第二个参数的title属性中，你错误将标题作为第一个参数传入，会触发参数解析异常
语法错误：第一个$appCtrl.BrowseFile函数缺少闭合花括号，导致$appCtrl.BrowseFolder被定义在了BrowseFile的作用域内部，调用时会触发作用域错误甚至阻塞UI
重名冲突：两个方法内部的读取函数重名，且目录选择返回的filePaths是数组，你直接赋值可能不符合后续使用预期

修复后可用代码

// 第一组：文件选择对话框
$appCtrl.BrowseFile = () => {
    dialog.showOpenDialog(null, {
        title: 'File browser',
        properties: ['openFile']
    }).then(result => {
        if(result.canceled) {
            $appCtrl.Log("No file selected");
        } else {
            $appCtrl.Log("File selected" + result.filePaths[0]);
            readFile(result.filePaths[0]);
        }
    }).catch(() => {
        $appCtrl.Log("No file selected");
    })

    function readFile(filepath) {
        $appCtrl.filePath = filepath;
        $appCtrl.$apply();
    }
}
// 第二组：目录选择对话框
$appCtrl.BrowseFolder = () => {
    dialog.showOpenDialog(null, {
        title: 'Folder browser',
        properties: ['openDirectory']
    }).then(result => {
        if(result.canceled) {
            $appCtrl.Log("No directory selected");
        } else {
            $appCtrl.Log("Directory selected" + result.filePaths[0]);
            readDir(result.filePaths[0]);
        }
    }).catch(() => {
        $appCtrl.Log("No directory selected");
    })

    function readDir(filepath) {
        $appCtrl.filePath = filepath;
        $appCtrl.$apply();
    }   
}