如何在 Electron 中获取拖放到输入文件上的文件的绝对路径？

Question

我正在使用 Electron 开发一个应用程序，在尝试获取已拖放到文件输入字段的文件的绝对路径时遇到了问题。

众所周知，Electron 使用基于浏览器的界面，这使得访问拖放文件的绝对路径变得困难。至此，我可以在主进程中使用dialog.showOpenDialog方法打开文件对话框时获取文件的绝对路径，如下例所示：

//Process main (main.js):

// Example of how to get the absolute path of a video
ipcMain.handle('select-file', async () => {
    const { canceled, filePaths } = await dialog.showOpenDialog(mainWindow, {
        properties: ['openFile'],
        title: 'Select your video file',
        filters: [
            { name: 'Videos', extensions: ['mp4', 'avi', 'mov', 'mkv'] }
        ]
    });
    return canceled ? null : filePaths[0];
});

//Renderer process (renderer.js):

uploadSection.addEventListener('click', async () => {
    const filePath = await ipcRenderer.invoke('select-file');
    if (filePath) {
        console.log('Selected file:', filePath);
    }

});

这对于打开文件选择器来说效果很好，但我想在将文件直接拖放到输入上时实现类似的效果。但是，由于绝对路径无法通过浏览器的文件输入 API 直接访问，因此我在 Electron 中实现此功能时遇到困难。

有没有人遇到过这个问题或找到了解决方案来获取已拖放到 Electron 中的文件输入上的文件的绝对路径？

预先感谢您的帮助！

到目前为止我已经尝试了几种方法，但似乎都不适合我的情况。我还想知道 Electron 的 web.utils.PathForFiles 是否可能是解决方案，但我还没有找到适合我的案例的任何实现示例。

Answer 1

获取系统上文件实际路径的解决方案

[电子文档] (https://www. Electronjs.org/docs/latest/api/web-utils)

Answer 2

https://github.com/electron/electron/issues/44370 文件 API：不再可能获取已删除文件的绝对路径

要使用 webUtils.getPathForFile 检索拖放文件的路径，您需要在 preload.js 中公开一个新的 API。以下是详细步骤：

1. 修改preload.js 在 preload.js 中，使用 contextBridge 和 webUtils 公开一个新方法 getPathForFile。

从“电子”导入 { contextBridge, ipcRenderer, webUtils }; contextBridge.exposeInMainWorld('api', { 获取文件路径：（文件）=> { const 路径 = webUtils.getPathForFile(file); 返回路径； }, });

2. 修改App.vue 为拖放区域添加以下 HTML：

   <#div style="border: 1px dashed var(--color-fill-4);height: 120px;width: 100%;border-radius: 4px;overflow: hidden;align-content: center;text-align: center;" @dragover.prevent @drop.prevent="handleDrop" @dragenter="handleDragEnter" @dragleave="handleDragLeave">将文件拖至此处

脚本部分 添加以下脚本来处理文件删除：

const handleDrop = async (event) => {
  event.preventDefault(); // Prevent default behavior

  const items = event.dataTransfer.items; // Get the dragged file items
  const filePaths = [];

  for (let i = 0; i < items.length; i++) {
    const file = items[i].getAsFile(); // Get the file object
    if (file) {
      const filePath = await window.api.getFilePath(file);
      console.log('filePath::: ', filePath);
      filePaths.push(filePath); // Get the absolute file path
    }
  }
};