Electron中showDirectoryPicker()未选目录后永久失效问题求助

这个问题仅出现在Electron最新版本中，Chromium浏览器无此问题。使用Filesystem API的showDirectoryPicker()方法打开目录选择器时，存在以下异常场景：

示例代码：

async function handleClick() {
    try {
        dirHandle = await window.showDirectoryPicker({startIn: "downloads"});
    } catch (error) {
        console.log(error);
    }
}

当用户处于Downloads目录时，未选择子目录直接点击「Open」，目录选择器关闭但dirHandle为null；再次点击按钮调用showDirectoryPicker()会抛出错误：

NotAllowedError: Failed to execute 'showDirectoryPicker' on 'Window': File picker already active.

后续所有调用均失败，需要解决如何重置文件选择器以重新打开，或让showDirectoryPicker()直接选中起始目录（如Downloads）。

解决方案 #

1. 主动捕获异常并重置状态 #

Electron的这个bug会导致文件选择器的状态未正确清理，我们可以通过捕获NotAllowedError并结合延迟重试的方式，强制重置选择器状态：

let isPickerActive = false;

async function handleClick() {
    if (isPickerActive) return;
    isPickerActive = true;

    try {
        dirHandle = await window.showDirectoryPicker({startIn: "downloads"});
        // 处理选中的目录，若直接打开起始目录，判断dirHandle是否为null
        if (!dirHandle) {
            // 手动尝试重新获取起始目录handle
            dirHandle = await window.showDirectoryPicker({startIn: "downloads"});
        }
    } catch (error) {
        if (error.name === 'NotAllowedError' && error.message.includes('File picker already active')) {
            // 延迟后重试，给Electron时间清理状态
            setTimeout(() => {
                isPickerActive = false;
                handleClick();
            }, 500);
            return;
        }
        console.log(error);
    } finally {
        isPickerActive = false;
    }
}

2. 直接获取并缓存起始目录Handle #

如果业务允许直接选中起始目录（如Downloads），可以提前获取该目录的handle并缓存，避免每次调用选择器：

let cachedDownloadsHandle;

// 提前获取Downloads目录的handle
async function initDownloadsHandle() {
    try {
        cachedDownloadsHandle = await window.showDirectoryPicker({startIn: "downloads"});
    } catch (error) {
        console.log('获取Downloads目录失败:', error);
    }
}

// 页面加载时初始化
window.addEventListener('load', initDownloadsHandle);

async function handleClick() {
    // 如果缓存存在直接使用，否则调用选择器
    if (cachedDownloadsHandle) {
        dirHandle = cachedDownloadsHandle;
        // 后续业务逻辑
    } else {
        try {
            dirHandle = await window.showDirectoryPicker({startIn: "downloads"});
            cachedDownloadsHandle = dirHandle;
        } catch (error) {
            console.log(error);
        }
    }
}

3. 降级使用Electron原生对话框 #

作为临时替代方案，可以使用Electron的dialog.showOpenDialog() API，它不存在这个状态异常问题，且能直接指定起始目录：

// 主进程代码（main.js）
const { ipcMain, dialog, app } = require('electron');

ipcMain.handle('open-directory', async () => {
    const result = await dialog.showOpenDialog({
        properties: ['openDirectory'],
        defaultPath: app.getPath('downloads')
    });
    if (!result.canceled) {
        return result.filePaths[0];
    }
    return null;
});

// 渲染进程代码
async function handleClick() {
    try {
        const dirPath = await ipcRenderer.invoke('open-directory');
        // 若需要FileHandle，可通过路径再次获取
        if (dirPath) {
            dirHandle = await window.showDirectoryPicker({startIn: dirPath});
        }
    } catch (error) {
        console.log(error);
    }
}

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