Electron中如何获取拖拽到文件输入框的文件绝对路径？

核心思路 #

Electron 对浏览器原生的 File 对象做了扩展，新增了 path 属性，直接包含文件的绝对路径。只需在渲染进程中正确监听拖拽事件，就能获取到该路径。

实现步骤 #

1. 主进程基础配置 #

确保窗口配置符合安全规范（现代 Electron 默认配置即可，以下是完整示例）：

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true, // 推荐开启上下文隔离保障安全
      preload: path.join(__dirname, 'preload.js') // 预加载脚本（按需使用）
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

2. 渲染进程监听拖拽事件 #

给文件输入框（或其容器）添加拖拽事件监听，阻止浏览器默认行为并获取文件路径：

// renderer.js
const fileInput = document.getElementById('video-file-input');

// 阻止默认拖拽行为，避免浏览器直接打开文件
['dragenter', 'dragover'].forEach(eventType => {
  fileInput.addEventListener(eventType, (e) => {
    e.preventDefault();
    e.stopPropagation();
    // 可选：添加拖拽时的视觉反馈
    fileInput.classList.add('dragover');
  });
});

// 拖拽离开时移除视觉反馈
fileInput.addEventListener('dragleave', () => {
  fileInput.classList.remove('dragover');
});

// 处理文件放下逻辑
fileInput.addEventListener('drop', (e) => {
  e.preventDefault();
  e.stopPropagation();
  fileInput.classList.remove('dragover');

  const files = e.dataTransfer.files;
  if (files.length > 0) {
    // 直接通过Electron扩展的path属性获取绝对路径
    const absoluteFilePath = files[0].path;
    console.log('拖拽文件的绝对路径:', absoluteFilePath);
    
    // 按需处理路径：比如展示到自定义UI，或通过IPC传递给主进程
    // 示例：传递给主进程处理
    // window.electronAPI.processDraggedFile(absoluteFilePath);
  }
});

3. 上下文隔离下的IPC交互（可选） #

如果开启了上下文隔离，需要在预加载脚本中暴露IPC方法供渲染进程调用：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  processDraggedFile: (filePath) => ipcRenderer.invoke('process-dragged-file', filePath)
});

关于 web.utils.PathForFiles #

该 API 是 Electron 旧版本中的废弃方法，目前无需使用。直接通过 File.path 属性获取绝对路径是官方推荐的当前方案。

注意事项 #

• 仅针对本地文件有效，网络文件无绝对路径；
• 若需兼容纯浏览器环境，可通过 typeof file.path !== 'undefined' 判断是否为 Electron 环境；
• 遵循安全最佳实践，保持上下文隔离开启，避免直接启用 nodeIntegration。

内容的提问来源于stack exchange，提问作者Rafax