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

Question

我正在使用带有打字稿集成的电子锻造。

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

我在index.ts中放入以下内容：

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

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

但是当我拖放文件时不显示任何内容

有什么想法吗？

Answer 1

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

• HTML5 文件 API
使用
• ipcMain 和 ipcRenderer 发送消息

操作发生在

renderer

上，它使用

HTML5 FIle API

获取删除的文件，并使用 main 将

文件路径

传递到

electron's IPC

。

渲染器.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
})

Answer 2

所选答案对我不起作用，因为该属性已被弃用，取而代之的是webUtils API。用途：

const { webUtils } = require('electron')
const path = webUtils.getPathForFile(document.querySelector('input').files[0])