electron 和 react 进程通信 -526互联

现在有个需求，我想要使用 react 选择上传文件，获取文件路径
在浏览器里面调用 ant design 的 upload 组件是做不到的，只能获取文件名

由于浏览器的安全限制，无法获取文件的完整路径。如果需要获取文件的完整路径，可以考虑使用 Electron 等桌面应用程序开发框架，或者使用 ActiveX 控件等浏览器插件来实现。

这个时候如果使用 electron 的ipcmain ，在react 里面直接调用 ipcmain 函数的话会报错

报 window.require is not a function

查了文档发现 electron 有个预加载
文档 https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-preload

就是electron 启动的时候给全局 window 注册个对象，比如注册个 electron 对象，这样就可以调用 electron 里面的方法拉， react 在调用的时候判断 window.electron 是否存在，存在就调用，不存在就不调用，这样就不会报错啦

代码如下
electron.js 这里启用预加载脚本

然后在electron.js 同级目录下创建 preload.js

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

/**
 * 文件相关
 */
const operateFile = {
    selectFiles: (ops) => ipcRenderer.invoke("dialog:selectFiles", ops),
};

// 将 window.electron 这个对象注入 暴露给浏览器
contextBridge.exposeInMainWorld('electron', {
    node: () => process.versions.node,
    chrome: () => process.versions.chrome,
    electron: () => process.versions.electron,

    // 暴露操作文件
    ...operateFile,
})

在electron.js 里面处理对应的事件

ipcMain.handle("dialog:selectFiles", openDialog);

// 打开文件选择器
async function openDialog(e, ops) {
    const { canceled, filePaths } = await dialog.showOpenDialog(
        new BrowserWindow({
            show: false,
            alwaysOnTop: true,
        }),
        ops
    );
    let result = { code: 199, message: "错误未知", data: {} };
    if (canceled) {
        result = {
            code: 101,
            message: "用户取消选择!",
            data: {},
        };
    } else {
            result = {
            code: 0,
            message: "读取成功!",
            data: {
                fileList: filePaths,
            },
        };
    }

    return result;
}

然后在react 里面调用

最后点击按钮，就会弹出来 electron 的文件选择框，显示出你现在文件的路径啦

antdesignpro electron react