Blazor中DxUpload组件的SelectedFilesChanged事件无法触发

核心问题定位 #

你的代码中将DxUpload的Visible属性绑定为初始值false的UploadVisible，而DxUpload组件在不可见状态下不会完成内部文件选择逻辑的初始化，导致文件选择后无法触发SelectedFilesChanged事件。

修复步骤 #

1. 调整组件可见性控制方式
   不要直接使用Visible="false"隐藏组件，改用CSS样式控制显示/隐藏，确保组件始终被渲染到DOM中：

   <DxUpload Name="file"
             style="@(UploadVisible ? "display:block" : "display:none")"
             ExternalSelectButtonCssSelector="#file-upload-browse-button"
             ExternalDropZoneCssSelector="#file-upload-dropzone"
             ExternalDropZoneDragOverCssClass="custom-dropzone-hover"
             UploadUrl="https://localhost:7226/api/Upload/Upload/"
             SelectedFilesChanged="@SelectedFilesChanged"
             MaxFileSize="15000000">
   </DxUpload>
   

   原因：当Visible="false"时，Blazor不会将组件渲染到DOM，DxUpload的JS交互逻辑无法完成绑定，自然无法捕获文件选择事件。

2. 验证外部按钮的绑定有效性
   确认ExternalSelectButtonCssSelector="#file-upload-browse-button"对应的按钮ID唯一且正确渲染到DOM中，可通过浏览器开发者工具检查按钮的实际ID。

3. 优化UploadUrl生成逻辑
   可借助NavigationManager生成正确的绝对路径，避免硬编码带来的环境适配问题：

   string UploadUrl { get; set; }
   
   protected override void OnInitialized()
   {
       UploadUrl = NavigationManager.ToAbsoluteUri("/api/Upload/Upload/").ToString();
   }
   

额外检查项 #

• 确保项目已正确引入DevExpress Blazor的JS资源（在_Host.cshtml或index.html中）：

  <script src="_content/DevExpress.Blazor/dx-blazor.js"></script>
  

• 查看浏览器控制台是否存在JS报错，组件初始化失败的错误可能间接导致事件无法触发。

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