调用Kendo Upload的uploadFiles方法无响应问题求助

你的核心问题在于错误地将原生File对象直接断言为Kendo Upload的FileInfo类型，未构造符合要求的FileInfo实例；同时缺少对现有文件列表的清空操作，且uploadFiles方法的调用逻辑需要调整。

具体修复步骤 #

1. 正确构造FileInfo对象 #

Kendo Upload的addFiles方法需要严格符合FileInfo接口的对象，不能直接将原生File类型强制转换。需手动构造包含必要属性的实例，尤其是rawFile（关联原生文件）和唯一uid：

fileChanged(event: any) {
  if(event && event.target.files && event.target.files.length) {
    const selectedFile = event.target.files[0];
    // 构造符合要求的FileInfo对象
    const fileInfo: FileInfo = {
      name: selectedFile.name,
      size: selectedFile.size,
      extension: '.' + selectedFile.name.split('.').pop()?.toLowerCase(),
      rawFile: selectedFile,
      uid: Math.random().toString(36).slice(2, 11) // 生成唯一标识
    };

    // 清空现有文件，满足"覆盖当前选择"的需求
    this.kendoUpload.clearFiles();
    // 添加新文件到组件
    this.kendoUpload.addFiles([fileInfo]);
    // 触发上传操作，指定要上传的文件数组
    this.kendoUpload.uploadFiles([fileInfo]);
  }
}

2. 优化隐藏input的accept绑定 #

原模板中直接插值数组虽能自动转为逗号分隔，但使用Angular属性绑定更严谨：

<input #fileInput type="file" 
      [hidden]="true" 
      [accept]="fileRestrictions.allowedExtensions.join(',')"
      (change)="fileChanged($event)"/>

3. 确认组件未处于禁用状态 #

检查imageType是否为'Custom'且disabled为false，若组件处于禁用状态，addFiles和uploadFiles方法都会失效。

4. 调整uploadFiles调用时机 #

addFiles后组件需要短暂时间更新内部状态，若直接调用uploadFiles无响应，可尝试延迟执行：

this.kendoUpload.addFiles([fileInfo]);
setTimeout(() => {
  this.kendoUpload.uploadFiles([fileInfo]);
}, 100);

额外注意点 #

• no-pointer-events类阻止Kendo Upload自身选择按钮触发点击，这部分逻辑正确；
• 每次打开文件选择前重置fileInput.nativeElement.value = null是必要操作，避免重复选择同一文件时不触发change事件。

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