How to show an open file native dialog with Electron?

在 Electron 中，打开本地文件选择器对话框通常是通过使用 dialog 模块来实现的。dialog 模块是 Electron 的一部分，它提供了调用原生系统对话框的方法，比如打开文件、保存文件以及消息提示等。为了打开文件选择器对话框，我们可以使用 dialog.showOpenDialog() 方法。

下面是一个如何使用 dialog.showOpenDialog() 方法在 Electron 应用中打开文件选择器对话框的示例：

首先，确保你已经设置好了 Electron 的环境并且可以运行基本的 Electron 应用。

然后，在你的 Electron 应用的主进程文件中（通常是 main.js 或 index.js），你可以加入以下代码来实现打开文件选择器对话框的功能：

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

app.on('ready', () => {
    let mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    mainWindow.loadFile('index.html'); // 加载一个网页

    // 打开文件选择器对话框
    dialog.showOpenDialog(mainWindow, {
        properties: ['openFile', 'multiSelections'] // 允许用户选择文件，多选
    }).then(result => {
        console.log(result.canceled);
        console.log(result.filePaths);
    }).catch(err => {
        console.error(err);
    });
});

app.on('window-all-closed', () => {
    app.quit();
});

在这段代码中，当 Electron 应用准备就绪后，我们创建了一个新的浏览器窗口并加载了一个 HTML 文件。然后，我们使用 dialog.showOpenDialog() 方法打开了文件选择器对话框。我们设置了 properties 选项，允许用户选择多个文件（multiSelections），同时也允许选择文件（openFile）。

在 dialog.showOpenDialog() 的 Promise 返回后，我们可以通过 result 对象获取用户选择的文件路径和取消状态。如果用户取消了对话框，result.canceled 将会是 true；否则，你可以从 result.filePaths 数组中获取用户选择的文件路径。

这个功能在实际的应用程序中非常有用，特别是在需要从用户的本地系统中获取文件时。例如，如果你正在开发一个图像编辑软件，用户可能需要从他们的电脑中选择图像文件来进行编辑。