Blazor InputFile选择超243个文件时异常问题求助

这个问题的核心原因是Blazor Server依赖的SignalR通信存在默认消息大小限制：当选择244+图片时，浏览器会将所有文件的元数据（文件名、大小、类型等）打包成SignalR消息发送给服务器，消息总大小超过了SignalR Hub的默认接收阈值，导致连接被重置，页面强制刷新，LoadFiles方法因此无法被执行。

解决方案1：调整SignalR最大消息大小配置 #

在项目的Program.cs（.NET 6+）或Startup.cs（.NET 5及更早版本）中，修改ServerSideBlazor的配置，增大SignalR Hub的最大接收消息大小：

// Program.cs 示例
builder.Services.AddServerSideBlazor(options =>
{
    // 设置为10MB，可根据实际文件元数据总量调整
    options.HubOptions.MaximumReceiveMessageSize = 10 * 1024 * 1024;
});

解决方案2：前端提前拦截文件数量（推荐） #

在浏览器端先校验文件数量，超过限制直接提示并清空选择，避免触发服务器端的SignalR限制。

1. 添加前端校验脚本（可放在_Host.cshtml或组件的隔离JS文件中）：

<script>
window.validateFileCount = function(inputElement, maxAllowed) {
    if (inputElement.files.length > maxAllowed) {
        return false;
    }
    return true;
};
</script>

2. 修改Blazor组件中的InputFile代码，整合前端校验：

<h5 class="mb-1 text-danger">@messageText</h5>
<InputFile class="form-control" multiple accept=".png,.jpg,.jpeg"
           @onchange="async (e) => {
               var isValid = await JS.InvokeAsync<bool>("validateFileCount", e.Target, Constants.MaxImageCount);
               if (!isValid) {
                   messageText = "image overflow";
                   // 清空文件选择框
                   e.Target.value = "";
                   StateHasChanged();
                   return;
               }
               // 校验通过再调用LoadFiles
               await LoadFiles(e.Value);
           }" />

@foreach (var image in images)
{
    <div class="list-group-item list-group-item-action">
        <p>@image.Name</p>
    </div>
}

@code {
    [Inject]
    private IJSRuntime JS { get; set; }

    private string messageText = "";
    List<IBrowserFile?> images = new List<IBrowserFile?>();

    private async Task LoadFiles(InputFileChangeEventArgs e)
    {
        if (images.Count + e.FileCount > Constants.MaxImageCount)
        {
            messageText = "image overflow";
        }
        else
        {
            var files = e.GetMultipleFiles(Constants.MaxImageCount);
            foreach (var img in files.Where(x => x != null && x.ContentType.Contains("image")))
            {
                images.Add(img);
            }
            messageText = "";
        }
        StateHasChanged();
    }
}

解决方案3：优化服务器端校验逻辑 #

确保在LoadFiles方法中优先校验文件数量，避免不必要的元数据处理：

private async Task LoadFiles(InputFileChangeEventArgs e)
{
    // 先校验总数，超过直接返回
    if (images.Count + e.FileCount > Constants.MaxImageCount)
    {
        messageText = "image overflow";
        StateHasChanged();
        return;
    }
    
    // 仅在校验通过后处理文件
    var files = e.GetMultipleFiles(Constants.MaxImageCount - images.Count);
    foreach (var img in files.Where(x => x != null && x.ContentType.Contains("image")))
    {
        images.Add(img);
    }
    messageText = "";
    StateHasChanged();
}

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