Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2)

接上篇 Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (1)

5. 添加目录浏览功能

打开Program.cs文件,在 app.UseStaticFiles(); 之后加入一句 app.UseDirectoryBrowser(); 就可以启动默认的目录浏览功能, 我们这里加入一点限制,只浏览Upload文件夹,并且把默认的界面英文改为中文,并且按修改时间逆序排序.

右键打开NuGet包管理,安装 AME.SortedDirectoryChs 包, 这是一个DirectoryBrowserFormatter,支持中文界面并按修改时间逆序排序,因为篇幅关系,就不贴源码了, 源码在文末项目内可找到.

文件头部加入引用

using Microsoft.Extensions.FileProviders;
using System.Text.Encodings.Web;

语句app.UseDirectoryBrowser();修改为

var dir = Path.Combine(app.Environment.WebRootPath, "Upload");
if (!Directory.Exists(dir)) Directory.CreateDirectory(dir);

var opt = new DirectoryBrowserOptions
{
    FileProvider = new PhysicalFileProvider(dir),
    Formatter = new AME.HtmlDirectoryFormatterChsSorted(HtmlEncoder.Default),
    RequestPath = new PathString("/Upload")
}; 
app.UseDirectoryBrowser(opt);

现在运行一下看看效果

点击 浏览文件 按钮,显示了预期的界面,修复上一节翻车事件.