Electron主进程中如何获取拖拽文件的完整文件路径？

嘿，我来帮你搞定这个问题！你遇到的核心问题其实是IPC无法直接传输浏览器环境的File对象——这类复杂对象包含不可序列化的属性（比如关联的文件读取方法），在跨进程传输时会被“榨干”成空对象，这就是主进程里打印出[ {}, {}, {} ]的原因。

下面是具体的解决步骤，全程兼顾Electron的安全配置（比如默认开启的contextIsolation）：

第一步：修改预加载脚本，添加获取文件路径的方法 #

因为React渲染进程处于隔离上下文，不能直接访问Electron给File对象扩展的path属性，所以我们需要在预加载脚本（preload.js）里暴露一个安全的方法，用来提取拖拽文件的本地路径：

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

contextBridge.exposeInMainWorld('api', {
  send: (channel, data) => {
    ipcRenderer.send(channel, data);
  },
  receive: (channel, callback) => {
    ipcRenderer.on(channel, (event, ...args) => callback(...args));
  },
  // 新增方法：提取拖拽文件的本地完整路径
  getDroppedFilePaths: (items) => {
    const filePaths = [];
    for (const item of items) {
      // 只处理文件类型的拖拽项
      if (item.kind === 'file') {
        const file = item.getAsFile();
        // Electron会给本地文件的File对象添加path属性，就是完整本地路径
        if (file?.path) {
          filePaths.push(file.path);
        }
      }
    }
    return filePaths;
  }
});

第二步：修改前端React的拖拽处理逻辑 #

不再直接传输File对象，而是调用预加载脚本提供的方法提取路径，再把路径数组发给主进程：

const handleDrop = async (event) => {
  event.preventDefault();
  // 用dataTransfer.items而不是files，能拿到更准确的拖拽项信息
  const droppedItems = Array.from(event.dataTransfer.items);
  
  // 调用预加载的方法获取完整文件路径
  const filePaths = window.api.getDroppedFilePaths(droppedItems);
  console.log('本地文件路径:', filePaths);

  // 把路径数组发给主进程（数组是可序列化的，不会丢失信息）
  window.api.send('get-filepaths', filePaths);

  window.api.receive('get-filepaths-response', (filepathsRsp) => {
    console.log('主进程返回的路径:', filepathsRsp);
  });
};

第三步：修改主进程的处理逻辑 #

现在主进程收到的直接是字符串类型的路径数组，可以直接使用：

const { ipcMain } = require('electron');

ipcMain.on('get-filepaths', (event, filePaths) => {
  console.log('主进程收到的文件路径:', filePaths);

  // 这里可以对路径做任何你需要的处理，比如读取文件、解析内容等
  const processedPaths = filePaths.map(path => {
    console.log('单个文件路径:', path);
    return path; // 示例：直接返回原路径，你可以替换成自己的处理逻辑
  });

  // 把处理后的路径返回给渲染进程
  event.reply('get-filepaths-response', processedPaths);
});

额外注意：确保BrowserWindow配置正确 #

创建窗口时要保证预加载脚本路径正确，并且保持默认的安全配置（不要随便开nodeIntegration）：

const { BrowserWindow } = require('electron');
const path = require('path');

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    // 预加载脚本的路径要正确
    preload: path.join(__dirname, 'preload.js'),
    // 保持contextIsolation开启，这是Electron的默认安全配置
    contextIsolation: true,
    // 保持nodeIntegration关闭，避免安全风险
    nodeIntegration: false
  }
});

这样处理后，你就能在主进程里拿到拖拽文件的完整本地路径啦！

备注：内容来源于stack exchange，提问作者Martin