Blazor文件输入属性验证：如何限制文件大小不超过3MB

前端即时验证 #

利用Blazor自带的InputFile组件，通过OnChange事件实时检查文件大小：

<InputFile OnChange="HandleFileSelected" />
<p style="color:red">@errorMessage</p>

@code {
    private string errorMessage = string.Empty;
    // 定义3MB对应的字节数
    private const long MaxAllowedSize = 3 * 1024 * 1024;

    private void HandleFileSelected(InputFileChangeEventArgs args)
    {
        errorMessage = string.Empty;
        var selectedFile = args.File;
        
        if (selectedFile.Size > MaxAllowedSize)
        {
            errorMessage = $"文件大小超出限制（最大3MB），当前文件：{FormatFileSize(selectedFile.Size)}";
            return;
        }

        // 文件符合要求，可执行后续准备逻辑（如暂存文件对象）
    }

    // 格式化文件大小为易读格式
    private string FormatFileSize(long bytes)
    {
        return bytes switch
        {
            < 1024 => $"{bytes} 字节",
            < 1024 * 1024 => $"{bytes / 1024:F2} KB",
            _ => $"{bytes / (1024 * 1024):F2} MB"
        };
    }
}

结合表单验证（EditForm场景） #

如果需要在表单提交流程中整合文件大小验证，可通过EditContext手动添加验证消息：

<EditForm Model="@uploadModel" OnValidSubmit="SubmitForm">
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <InputFile @bind-Value="uploadModel.SelectedFile" OnChange="ValidateFile" />
    <ValidationMessage For="@(() => uploadModel.SelectedFile)" />

    <button type="submit">确认上传</button>
</EditForm>

@code {
    private UploadModel uploadModel = new();
    private const long MaxAllowedSize = 3 * 1024 * 1024;

    private void ValidateFile(InputFileChangeEventArgs args)
    {
        var editContext = EditContext;
        var fieldId = FieldIdentifier.Create(() => uploadModel.SelectedFile);

        if (args.File.Size > MaxAllowedSize)
        {
            editContext.AddValidationMessage(fieldId, "文件大小不能超过3MB");
        }
        else
        {
            editContext.MarkFieldAsValid(fieldId);
        }
        // 通知表单更新验证状态
        editContext.NotifyValidationStateChanged();
    }

    private void SubmitForm()
    {
        // 表单验证通过，执行文件上传逻辑
    }

    public class UploadModel
    {
        public IBrowserFile? SelectedFile { get; set; }
    }
}

后端强制验证 #

前端验证仅作用户体验优化，必须在后端再次校验（前端验证可被绕过）：

// Blazor Server或API控制器中的上传处理方法
public async Task<IActionResult> ProcessUpload(IFormFile file)
{
    const long MaxAllowedSize = 3 * 1024 * 1024;

    if (file == null || file.Length == 0)
    {
        return BadRequest("请选择要上传的文件");
    }

    if (file.Length > MaxAllowedSize)
    {
        return BadRequest("文件大小超出限制，最大支持3MB");
    }

    // 后续文件保存、业务处理逻辑
    return Ok("文件上传成功");
}

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