如何在Blazor Server中无需控制器使用RadzenUpload组件上传文件？

核心逻辑 #

RadzenUpload默认设计依赖后端API控制器处理上传，但Blazor Server可以借助SignalR的双向通信能力，直接在组件内部处理文件流，完全不需要额外的控制器。

具体实现步骤 #

1. 配置RadzenUpload组件
   移除默认的Url属性（该属性用于指定控制器接口地址），绑定OnChange事件来捕获文件上传动作：

   <RadzenUpload 
       @ref="uploadRef"
       OnChange="@HandleFileUpload"
       Accept=".txt,.pdf,.docx"
       Multiple="false"
   />
   

2. 编写文件处理代码
   在组件的代码块中，通过OnChange事件参数获取文件对象，直接在Blazor Server端完成文件读取、存储等操作：

   private RadzenUpload uploadRef;
   
   private async Task HandleFileUpload(UploadChangeEventArgs args)
   {
       var targetFile = args.Files.FirstOrDefault();
       if (targetFile == null) return;
   
       // 读取文件流（限制最大10MB，可根据需求调整）
       using var fileStream = targetFile.OpenReadStream(maxAllowedSize: 10 * 1024 * 1024);
       using var memoryStream = new MemoryStream();
       await fileStream.CopyToAsync(memoryStream);
       var fileBytes = memoryStream.ToArray();
   
       // 示例：将文件保存到服务器本地目录
       var saveDirectory = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/uploads");
       if (!Directory.Exists(saveDirectory))
       {
           Directory.CreateDirectory(saveDirectory);
       }
       var savePath = Path.Combine(saveDirectory, targetFile.Name);
       await File.WriteAllBytesAsync(savePath, fileBytes);
   
       // 重置上传组件状态，方便下次上传
       uploadRef.Clear();
   }
   

3. 关键注意点

   • 确保服务器对目标存储目录有写入权限，比如示例中的wwwroot/uploads需要提前创建或在代码中自动创建
   • 通过maxAllowedSize限制单文件大小，避免内存占用过高
   • 如需支持多文件上传，将Multiple属性设为true，并遍历args.Files逐个处理

关于事件不触发的问题 #

之前无法触发事件，大概率是因为组件配置了Url属性——RadzenUpload会优先尝试向指定的控制器地址发送请求，而不会触发Blazor端绑定的事件。移除Url属性后，组件就会直接调用Blazor端的事件处理逻辑。

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