问题背景

在 Electron 应用中，当用户拖拽文件到应用时，我们需要获取文件的真实路径，而不是浏览器的临时路径。这对于文件处理应用至关重要。

常见错误方法

• 已弃用的path属性

javascript
// ❌ 错误 - path属性已被弃用
const handleDrop = (event) => {
  const file = event.dataTransfer.files[0];
  const filePath = file.path; // 这个属性已被弃用！
}

正确解决方案

只展示主要代码，具体前后端交互请自行封装！

1. 暴露webUtils API

javascript
const { contextBridge, ipcRenderer, webUtils } = require("electron");

const fileAPI = {
  // 其他API...
  
  // webUtils API - 获取拖拽文件的真实路径
  getPathForFile: (file) => webUtils.getPathForFile(file),
};

// 暴露API给渲染进程（前端）调用
contextBridge.exposeInMainWorld("electronAPI", {
  file: fileAPI,
});

2. 在渲染进程中使用正确的API

javascript
// 前端代码，拖拽后触发事件
const handleDrop = async (event) => {
  event.preventDefault();
  
  const files = event.dataTransfer?.files;
  if (files && files.length > 0) {
    // 以 file[0] 为例
    const file = files[0];
    const filePath = await window.electronAPI.file.getPathForFile(file);
  }
};