Blazor实现上传文件夹 - Blazor | Roc's Blog = 一些記錄

有这么个需求：

那么用 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;
	}

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

Blazor