内网文件系统文件选择器：Blazor Server获取文件路径方案咨询

由于浏览器的安全限制，标准HTML的<input type="file">不会返回文件的真实本地路径，针对Blazor Server的需求，以下是几个可行的实现方案：

1. 切换到Blazor Hybrid（推荐，适合桌面场景） #

如果你的应用可以适配桌面端部署，Blazor Hybrid（比如MAUI Blazor）可以直接利用.NET原生的文件选择API，绕过浏览器的路径限制：

代码示例（MAUI Blazor） #

在Blazor组件中注入IFolderPicker和IFilePicker，然后调用选择方法：

@inject IFilePicker FilePicker
@inject IFolderPicker FolderPicker

<button @onclick="PickFile">选择文件</button>
<button @onclick="PickFolder">选择目录</button>

@code {
    private async Task PickFile()
    {
        var result = await FilePicker.PickAsync(new PickOptions
        {
            PickerTitle = "选择文件"
        });
        if (result != null)
        {
            // 获取真实文件路径
            string filePath = result.FullPath;
            // 存入数据库逻辑
        }
    }

    private async Task PickFolder()
    {
        var result = await FolderPicker.PickAsync(new PickOptions
        {
            PickerTitle = "选择目录"
        });
        if (result != null)
        {
            string folderPath = result.FullPath;
            // 存入数据库逻辑
        }
    }
}

2. JavaScript互操作调用系统文件选择对话框（适配现有Blazor Server） #

通过JS互操作调用PowerShell或系统API弹出原生文件选择框，获取真实路径后传回Blazor：

步骤1：添加JS函数（wwwroot/js/filePicker.js） #

window.showFilePicker = async () => {
    const psCommand = `
        Add-Type -AssemblyName System.Windows.Forms;
        $dialog = New-Object System.Windows.Forms.OpenFileDialog;
        $dialog.Multiselect = $false;
        $result = $dialog.ShowDialog();
        if ($result -eq [System.Windows.Forms.DialogResult]::OK) { $dialog.FileName }
    `;
    const response = await fetch('/api/RunPowerShell', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ command: psCommand })
    });
    return await response.text();
};

window.showFolderPicker = async () => {
    const psCommand = `
        Add-Type -AssemblyName System.Windows.Forms;
        $dialog = New-Object System.Windows.Forms.FolderBrowserDialog;
        $result = $dialog.ShowDialog();
        if ($result -eq [System.Windows.Forms.DialogResult]::OK) { $dialog.SelectedPath }
    `;
    const response = await fetch('/api/RunPowerShell', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ command: psCommand })
    });
    return await response.text();
};

步骤2：添加API控制器（Controllers/RunPowerShellController.cs） #

[ApiController]
[Route("api/[controller]")]
public class RunPowerShellController : ControllerBase
{
    [HttpPost]
    public IActionResult Post([FromBody] PowerShellCommand command)
    {
        using var ps = System.Management.Automation.PowerShell.Create();
        ps.AddScript(command.Command);
        var result = ps.Invoke();
        if (result.Any())
        {
            return Ok(result[0].ToString());
        }
        return BadRequest("未选择文件/目录");
    }
}

public class PowerShellCommand
{
    public string Command { get; set; }
}

步骤3：在Blazor组件中调用 #

@inject IJSRuntime JSRuntime

<button @onclick="PickFileViaJS">选择文件</button>
<button @onclick="PickFolderViaJS">选择目录</button>

@code {
    private async Task PickFileViaJS()
    {
        string filePath = await JSRuntime.InvokeAsync<string>("showFilePicker");
        if (!string.IsNullOrEmpty(filePath))
        {
            // 存入数据库逻辑
        }
    }

    private async Task PickFolderViaJS()
    {
        string folderPath = await JSRuntime.InvokeAsync<string>("showFolderPicker");
        if (!string.IsNullOrEmpty(folderPath))
        {
            // 存入数据库逻辑
        }
    }
}

注意：这个方案仅适用于Windows环境，且需要服务器或本地部署的Blazor Server允许执行PowerShell命令，同时要做好权限控制，避免命令注入风险。

3. 使用浏览器File System Access API（有限支持） #

现代浏览器（Chrome/Edge 86+）支持File System Access API，可在用户授权后尝试获取文件路径：

代码示例 #

@inject IJSRuntime JSRuntime

<button @onclick="AccessFile">选择文件并获取路径</button>

@code {
    private async Task AccessFile()
    {
        string filePath = await JSRuntime.InvokeAsync<string>("getRealFilePath");
        if (!string.IsNullOrEmpty(filePath))
        {
            // 存入数据库逻辑
        }
    }
}

对应的JS函数：

window.getRealFilePath = async () => {
    try {
        const [fileHandle] = await window.showOpenFilePicker();
        const file = await fileHandle.getFile();
        // 注：多数浏览器仅返回文件名，完整真实路径需开启实验性特性，不推荐生产环境使用
        return file.name;
    } catch (err) {
        console.error(err);
        return null;
    }
};

此方案受浏览器限制，跨浏览器兼容性差，生产环境需谨慎使用。

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