如何从资源管理器中删除文件并获取它到 electronjs 应用程序的完整路径

Question

我正在使用带有 typescript 集成的 electron forge。

我找不到从资源管理器中拖放文件并获取其完整路径的解决方案

我输入 index.ts 以下内容：

import {app, BrowserWindow, ipcMain} from 'electron';

ipcMain.on('ondragstart', (event, filepath) => {
    console.log("ondragstart " + filepath); // doesn't work
});

但是当我拖放 n 个文件时没有显示任何内容

有什么想法吗？

Answer 1

首先你需要掌握一些概念：

HTML5 File API
Sending Messages 使用 ipcMain 和 ipcRenderer

操作发生在 renderer 上，它使用 HTML5 FIle API 获取删除的文件并使用 [=17= 将 文件路径 传递给 main ].

renderer.js

document.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.stopPropagation();
});

document.addEventListener('drop', (event) => {
    event.preventDefault();
    event.stopPropagation();

    let pathArr = [];
    for (const f of event.dataTransfer.files) {
        // Using the path attribute to get absolute file path
        console.log('File Path of dragged files: ', f.path)
        pathArr.push(f.path); // assemble array for main.js
    }
    console.log(pathArr);
    const ret = ipcRenderer.sendSync('dropped-file', pathArr);
    console.log(ret);
});

main.js

let winmain;

function createWindow () {
    winMain = new BrowserWindow({
        width: 1280,
        height: 720,
        webPreferences: {
            contextIsolation: false,
            nodeIntegration: true
        }
    })
    winMain.loadFile('index.html');
}



ipcMain.on('dropped-file', (event, arg) => {
    console.log('Dropped File(s):', arg);
    event.returnValue = `Received ${arg.length} paths.`; // Synchronous reply
})

如何从资源管理器中删除文件并获取它到 electronjs 应用程序的完整路径

How to drop a file from explorer and get it's full path to electronjs app

electron

electron-forge

renderer.js

main.js