Blazor Server中如何遍历wwwroot/paintings文件夹并生成画作链接？

核心思路 #

Blazor Server运行在服务端，可直接通过IWebHostEnvironment获取wwwroot的物理路径，读取指定目录下的文件列表，再动态生成对应链接。

实现步骤 #

1. 注入IWebHostEnvironment

在组件中注入服务端环境对象，用于定位wwwroot目录：

@inject IWebHostEnvironment WebHostEnv

2. 读取画作文件列表

在组件初始化阶段，读取wwwroot/paintings目录下的所有文件，可按需过滤非图片文件：

private List<string> paintingFiles = new();

protected override async Task OnInitializedAsync()
{
    // 拼接paintings目录的物理路径
    var paintingsDirPath = Path.Combine(WebHostEnv.WebRootPath, "paintings");
    
    // 检查目录是否存在，避免报错
    if (Directory.Exists(paintingsDirPath))
    {
        // 获取所有文件名，也可添加扩展名筛选（如只取jpg/png）
        paintingFiles = Directory.GetFiles(paintingsDirPath)
                                 .Select(Path.GetFileName)
                                 .ToList();
    }
}

3. 动态生成链接

在组件渲染区循环文件列表，生成对应链接，链接文本和目标路径均使用文件名：

@if (paintingFiles.Any())
{
    <div class="painting-links">
        @foreach (var fileName in paintingFiles)
        {
            <a href="/paintings/@fileName" target="_blank">@fileName</a>
            <br />
        }
    </div>
}
else
{
    <p>暂无画作</p>
}

优化建议 #

• 精准过滤文件：如果只需要加载特定格式的画作，可在GetFiles中添加扩展名筛选，比如Directory.GetFiles(paintingsDirPath, "*.jpg")，多格式支持可结合SelectMany：

  var extensions = new[] { "*.jpg", "*.png", "*.jpeg" };
  paintingFiles = extensions.SelectMany(ext => Directory.GetFiles(paintingsDirPath, ext))
                            .Select(Path.GetFileName)
                            .ToList();
  

• 异常处理：添加try-catch块处理文件读取时的权限、IO异常，避免组件崩溃。
• 缓存优化：若画作不会频繁更新，可使用IMemoryCache缓存文件列表，减少文件系统读取次数，提升性能。

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