Blazor开发：TelerikUpload无@SaveURL时隐藏上传状态仅选文件入集合的问题

问题本质 #

TelerikUpload 默认开启即时自动上传模式，选中文件后会自动向配置的SaveUrl地址发起上传请求。当未配置SaveUrl时，组件会因为找不到可访问的上传端点，在每个选中文件的条目下方显示待上传、无上传地址的状态标识，本质是组件内置的上传流程没有被主动中断导致的。

实现步骤 #

• 关闭组件自动上传开关，设置AutoUpload="false"，从根源上避免选中文件后立刻触发内置上传流程
• 拦截内置上传请求：通过OnUpload事件取消组件自带的上传动作，不让组件尝试请求不存在的SaveUrl
• 将选中的文件存入自己维护的文件集合，后续所有文件的处理逻辑完全由你自己的按钮点击事件控制
• （可选）如果不需要组件自带的文件条目渲染，设置ShowFileList="false"：组件会完全隐藏内置的文件列表、上传状态标识，仅保留文件选择触发按钮，所有选中文件的展示逻辑完全由你自定义

参考实现代码 #

页面组件配置 #

<TelerikUpload
    AutoUpload="false"
    ShowFileList="false"
    OnUpload="@ProcessSelectedFiles"
    Multiple="true"
    MaxFileSize="10485760">
</TelerikUpload>

<button class="btn btn-primary" @onclick="@SaveFilesToStorage">提交保存</button>

@* 自定义渲染选中的文件集合 *@
@if (selectedFiles.Any())
{
    <div class="selected-file-list">
        <h5>已选中的文件：</h5>
        @foreach (var file in selectedFiles)
        {
            <div class="file-item">
                @file.FileName（@($"{file.Size / 1024} KB")）
            </div>
        }
    </div>
}

后台逻辑代码 #

// 自定义维护的选中文件集合
private List<UploadFile> selectedFiles = new();

// 拦截组件的内置上传动作，存储选中的文件
private void ProcessSelectedFiles(UploadEventArgs args)
{
    // 取消组件自带的上传请求，避免触发对SaveUrl的调用
    args.IsCancelled = true;
    // 将本次选中的文件追加到自定义集合
    selectedFiles.AddRange(args.Files);
}

// 按钮点击后执行自定义保存逻辑
private async Task SaveFilesToStorage()
{
    // 此处写入你自己的文件保存逻辑：比如读取文件流、调用自定义接口、写入业务系统等
    // 全程不需要依赖TelerikUpload的SaveUrl配置
}

最终效果 #

完成上述配置后：

• 选中文件时不会触发任何内置上传请求，组件不会查找不存在的SaveUrl端点
• 组件自带的上传状态、文件条目UI完全隐藏，不会出现配置缺失导致的状态标识
• 所有选中的文件都会进入自定义维护的集合，保存触发时机完全由你的按钮点击逻辑控制

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