Blazor实现上传文件夹

有这么个需求：

1. 要上传文件夹
2. 并且要显示文件夹名

那么用blazor怎么实现呢？ 实现思路：用纯blazor实现似乎不可能，blazor不能通过浏览器获取到文件夹名或者路径。 既然这样，那就用blazor获得文件夹里所有文件的信息，用JS获取文件名。 Demo代码如下：

Razor部分

<button @onclick="MyMethod">订阅</button>  
<InputFile @ref="MyInputFile" OnChange="MyMethod2" webkitdirectory></InputFile>
<span id="label"></span> 
<button @onclick="@(async () => Console.WriteLine(await JS.InvokeAsync<string>("getText")))">读取</button>

@code{
    public InputFile MyInputFile { get; set; }  //把InputFile元素引用暴露出来
    
    public async Task MyMethod()  
    {  
        //调用js函数 ，把InputFile元素作为参数传给js
        await JS.InvokeVoidAsync("myFunction", MyInputFile.Element); 
    }
    
    public async Task MyMethod2(InputFileChangeEventArgs args)
    {
        //获取文件夹内所有文件信息
        var readOnlyList = args.GetMultipleFiles();
        foreach (var browserFile in readOnlyList) 
        {  
            Console.WriteLine(browserFile.Name);
        }
    }
}

JS部分

function myFunction(myInputFile) {  
    //给InputFile添加change事件监听
    myInputFile.addEventListener('change', function (e) {  
        const files = e.target.files;   
        const relativePath = files[0].webkitRelativePath;  //通过webkitRelativePath获得文件相对路径
        olderName = relativePath.split("/")[0];  //截取字符串获得文件名
        const label = document.getElementById('label')  
        label.innerText = olderName;  //把文件名写入指定dom元素内
        });  
}  

function getText() {
    //把写入dom的文件名值拿到通过函数return出来
    const label = document.getElementById('label')  
    return label.innerText;  
}

以上代码分为三部分，订阅事件，触发事件，读取结果。 在实际开发中，订阅事件可以写在打开模态框、打开抽屉或者组件初始化生命周期内，读取结果写在上传方法或者关闭模态框等处。具体情况具体对待。