如何在Blazor WebAssembly中读取并显示本地TXT文件内容

当然可以在Blazor里显示TXT文件内容啦！你当前的代码没出结果，问题出在把文件字节转换成Base64字符串了——这可不是咱们要的文本内容，得换成正确的文本解码方式。咱们一步步来解决：

问题根源 #

你代码里用了Convert.ToBase64String(buffer)，这会把文件的字节数组转成Base64编码的字符串，自然看不到正常的TXT文本。正确的做法是用文本编码（比如UTF-8）把字节数组解码成可读字符串。

修正后的完整代码 #

前端部分 #

<div class="col-4">
    <InputFile OnChange="OnInputFileChanged"></InputFile>
</div>
<p>@fileContent</p>

代码逻辑部分 #

首先要确保引入System.Text命名空间（因为要用到文本编码类）：

@using System.Text

然后修改事件处理方法：

private string fileContent = "";

// 把async void改成async Task，Blazor事件处理推荐用Task返回类型，避免潜在的异步问题
private async Task OnInputFileChanged(InputFileChangeEventArgs e)
{
    var selectedFile = e.File;
    var buffer = new byte[selectedFile.Size];
    
    // 读取文件流到缓冲区
    await selectedFile.OpenReadStream().ReadAsync(buffer);
    
    // 用UTF-8编码解码字节数组为文本，如果你的TXT文件是其他编码（比如GB2312），替换成对应的Encoding即可
    fileContent = Encoding.UTF8.GetString(buffer);
}

更高效的大文件处理方案 #

如果你的TXT文件比较大，一次性读入整个字节数组可能会占用过多内存，推荐用StreamReader逐行读取：

private async Task OnInputFileChanged(InputFileChangeEventArgs e)
{
    var selectedFile = e.File;
    // 使用StreamReader读取，默认UTF-8编码，也可以手动指定编码参数
    using var streamReader = new StreamReader(selectedFile.OpenReadStream());
    fileContent = await streamReader.ReadToEndAsync();
}

小提示 #

• 如果不确定TXT文件的编码，可以先尝试Encoding.Default（对应系统默认编码），但更推荐明确指定文件实际使用的编码，避免乱码。
• Blazor的InputFile组件默认允许选择单个文件，如果需要支持多选，可以添加Multiple属性：<InputFile Multiple OnChange="OnInputFileChanged"></InputFile>。

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