Electron拖拽文件/文件夹时应用崩溃问题求助

崩溃核心原因 #

尝试通过IPC传递不可序列化的FileList对象是导致应用崩溃、DevTools断开的直接原因。Electron的IPC通信仅支持可JSON序列化的数据，而e.dataTransfer.files返回的是浏览器原生FileList对象，包含底层资源引用，无法被序列化，直接传递会触发渲染进程崩溃。

修复步骤及代码调整 #

1. 修正HTML语法错误 #

原index.html存在样式语法错误和标签未闭合问题，先修正：

<div id="mainGrid" class="ag-theme-alpine-dark" style="width:100%;height:90vh;"></div>

2. 渲染进程：提取可序列化的路径信息 #

修改renderer.js的handleDrop函数，从拖拽事件中提取文件/文件夹的路径字符串（而非直接传递FileList），并正确处理IPC异步调用：

let dropArea = document.getElementById('mainGrid');

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false);
});
dropArea.addEventListener('drop', handleDrop, false);

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
};

async function handleDrop(e) {
    e.preventDefault();
    e.stopPropagation();

    const paths = [];
    // 遍历拖拽项，提取文件/文件夹路径
    for (const item of e.dataTransfer.items) {
        const entry = item.webkitGetAsEntry();
        if (entry) {
            paths.push(entry.fullPath);
        }
    }

    try {
        // 异步调用IPC接口，处理返回结果
        const files = await window.ipcRender.invoke('getFiles', paths);
        console.log('处理完成:', files);
    } catch (err) {
        console.error('处理失败:', err);
    }
};

3. 主进程：接收路径并处理 #

修改main.js，引入fs模块处理文件系统操作，接收路径数组并返回结构化结果：

const { ipcMain } = require('electron');
const fs = require('fs');

ipcMain.handle('getFiles', (event, filePaths) => {
    const files = [];
    try {
        console.log('收到拖拽路径:', filePaths);
        // 遍历路径，获取文件/文件夹信息
        filePaths.forEach(path => {
            const stats = fs.statSync(path);
            files.push({
                path: path,
                isDirectory: stats.isDirectory(),
                isFile: stats.isFile(),
                size: stats.size
            });
        });
        return files;
    } catch (e) {
        console.error('文件处理出错:', e);
        throw e; // 抛出错误让渲染进程捕获
    }
});

4. 确认窗口Preload配置 #

确保主进程创建窗口时正确配置webPreferences，保证preload脚本生效：

// 主进程创建窗口的示例代码
const { BrowserWindow, app } = require('electron');
const path = require('path');

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            contextIsolation: true, // 默认开启，保障上下文隔离安全
            nodeIntegration: false
        }
    });
    mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

关键注意事项 #

• 拖拽文件夹时，e.dataTransfer.files无法获取文件夹路径，必须通过e.dataTransfer.items结合webkitGetAsEntry()提取。
• IPC的invoke是异步操作，必须用await或.then()处理返回结果，避免异步逻辑错误。
• 主进程中处理文件系统操作时，需做好异常捕获，避免未处理的错误导致应用崩溃。

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