BlazorInputFile上传始终显示“未选择文件”且提交为空问题求助

问题根因 #

你遇到的两个问题都不属于组件Bug，是使用逻辑和组件特性导致的：

1. 提交表单提示文件为空：你在LoadFile回调中仅将文件对象赋值给了独立变量UploadedFile，没有同步赋值给表单绑定的模型属性Item.File，加上[Required]校验规则，自然会触发空值校验错误。
2. 选中文件名不展示：ASP.NET Core 3.1 配套的第三方BlazorInputFile组件本身没有内置选中文件名的渲染逻辑，需要自行添加展示代码。

具体修改步骤 #

1. 调整Razor模板，增加文件名展示 #

<EditForm Model="@Item" OnValidSubmit="@SubmitForm">
    <DataAnnotationsValidator />
    <div class="modal-body">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>File</label>
                    <InputFile OnChange="LoadFile"/>
                    <!-- 新增选中文件名展示逻辑 -->
                    @if (UploadedFile != null)
                    {
                        <small class="text-secondary mt-1 d-block">已选择文件：@UploadedFile.Name</small>
                    }
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-success">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="() => Close()">Close</button>
    </div>
    <ValidationSummary />
</EditForm>

2. 调整后台逻辑，同步赋值给模型属性 #

@code {
    public FormItem Item = new FormItem();
    private IFileListEntry UploadedFile;
    private EditContext _editContext;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(Item);
    }

    // 选择文件后会进入该方法，可正常读取到上传的文件内容
    private async Task LoadFile(IFileListEntry[] files)
    {
        if (files.Any())
        {
            UploadedFile = files.FirstOrDefault();
            // 核心修改：同步赋值给表单绑定的模型属性
            Item.File = UploadedFile;
            // 通知表单该字段已变更，更新校验状态
            _editContext.NotifyFieldChanged(FieldIdentifier.Create(() => Item.File));
        }
        else
        {
            UploadedFile = null;
            Item.File = null;
        }
        StateHasChanged();
    }

    protected async Task SubmitForm(EditContext editContext)
    {
        // 此处Item.File已经有值，可正常处理上传逻辑
    }
}

修改完成后两个问题都会解决，表单可以正常校验通过，选中的文件名也会在页面上展示。

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