React+Electron应用中拖拽文件后如何获取完整文件路径？

我正在尝试构建一个支持文件拖拽的React + Electron应用，目标是让用户可以把文件拖进指定区域，然后应用能获取到用户系统里的完整文件路径。目前我能正常捕获并显示文件名，但路径总是返回null或者空字符串。

以下是目前的情况：

• 主进程main.js的日志里，拖拽文件后会输出类似这样的内容：

  File dropped: 11-shonuff_by_omid-cms.mp3 - undefined

• 对应的日志截图如下：
  

下面是我代码里的关键部分（包括导入语句）：

App.js 相关代码 #

import React, { useState } from 'react';
import './App.css';

function App() {
  const [files, setFiles] = useState([]);

  const handleDrop = (event) => {
    event.preventDefault();
    const droppedFiles = Array.from(event.dataTransfer.files);
    setFiles(droppedFiles);
    droppedFiles.forEach(file => {
      console.log(`File dropped: ${file.name} - ${file.path}`);
    });
    if (window.electron) {
      console.log('Sending files-dropped event to main process');
      window.electron.sendFiles(droppedFiles.map(file => ({ name: file.name, path: file.path })));
    }
  };

  const handleFileSelect = (event) => {
    const selectedFiles = Array.from(event.target.files);
    setFiles(selectedFiles);
    selectedFiles.forEach(file => {
      console.log(`File selected: ${file.name} - ${file.path}`);
    });
    if (window.electron) {
      console.log('Sending files-dropped event to main process');
      window.electron.sendFiles(selectedFiles.map(file => ({ name: file.name, path: file.path })));
    }
  };

  const handleDragOver = (event) => {
    event.preventDefault();
  };

  return (
    <div className="App">
      <div
        className="drop-zone"
        onDrop={handleDrop}
        onDragOver={handleDragOver}
      >
        <p>Drag and drop files here, or click to select files</p>
        <input type="file" multiple onChange={handleFileSelect} />
      </div>
      <ul>
        {files.map((file, index) => (
          <li key={index}>{file.name} - {file.path}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

main.js 相关代码 #

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')  // Add this line
    },
  });

  const isDev = !app.isPackaged; // Check if the app is in development mode
  const startUrl = isDev
    ? 'http://localhost:3000' // Load from React dev server
    : `file://${path.join(__dirname, 'build', 'index.html')}`;

  mainWindow.loadURL(startUrl);

  if (isDev) {
    mainWindow.webContents.openDevTools(); // Open DevTools in development mode
  }

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

ipcMain.on('files-dropped', (event, files) => {
  console.log('Received files-dropped event');
  files.forEach(file => {
    console.log(`File dropped: ${file.name} - ${file.path}`);
  });
});

app.whenReady().then(() => {
  console.log('App is ready');
  createWindow();
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (mainWindow === null) createWindow();
});

我已经尝试过的操作：

• 确认可以通过file.name正常获取文件名
• 但无论在渲染进程还是主进程的日志里，file.path都是undefined
• 试过开启nodeIntegration，但知道这会带来安全问题，而且也没解决路径获取的问题

现在想请教：
如何在React + Electron的环境下正确获取每个拖拽文件的完整文件路径？是不是我当前的配置里有什么地方阻止了路径的捕获？对于preload脚本或者BrowserWindow的webPreferences，有没有推荐的修改方案？

感谢各位的指导！

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