Blazor WebAssembly中如何创建本地目录？

你遇到的问题核心在于：Blazor WebAssembly 运行在浏览器的沙箱环境中，没有直接访问本地文件系统的权限。你使用的System.IO.Directory.CreateDirectory是针对服务器端或桌面应用的API，在浏览器环境下无法执行本地文件操作，所以点击按钮没有任何反应。

要实现让用户在本地创建文件夹的功能，必须借助浏览器提供的File System Access API，通过Blazor的JS互操作来调用这个原生API。以下是具体实现步骤：

步骤1：编写Razor组件代码 #

@page "/create-local-folder"
@inject IJSRuntime JSRuntime

<button @onclick="CreateLocalFolder">创建本地文件夹</button>

@code {
    private async Task CreateLocalFolder()
    {
        try
        {
            // 调用自定义JS方法触发文件夹创建流程
            await JSRuntime.InvokeVoidAsync("createLocalFolder");
        }
        catch (Exception ex)
        {
            Console.WriteLine($"创建失败：{ex.Message}");
        }
    }
}

步骤2：添加JS工具函数 #

在wwwroot目录下新建js文件夹，创建file-operations.js文件，内容如下：

async function createLocalFolder() {
    try {
        // 弹出文件夹选择器，让用户选择要创建子文件夹的父目录
        const parentDirHandle = await window.showDirectoryPicker();
        
        // 在选中的目录下创建名为TestDir的新文件夹
        await parentDirHandle.getDirectoryHandle("TestDir", { create: true });
        
        alert("文件夹创建成功！");
    } catch (err) {
        // 用户取消操作或权限不足时触发
        if (err.name !== 'AbortError') {
            console.error(`操作错误：${err.message}`);
        }
    }
}

步骤3：在index.html中引入JS文件 #

在wwwroot/index.html的<body>标签末尾添加JS引用：

<script src="js/file-operations.js"></script>

关键说明 #

• 这个流程必须经过用户授权：浏览器会弹出对话框让用户选择父文件夹，只有用户确认后才能创建子文件夹，这是浏览器安全机制的硬性要求，无法绕过
• 该API支持Chrome、Edge、Firefox等现代主流浏览器，如需兼容旧浏览器，需要额外做降级处理

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