调用Kendo-Upload组件uploadFiles方法无响应问题排查

在Angular项目中使用Kendo Upload组件，需求是先创建父聚合对象并获取其ID，再将该ID附加到文件上传请求中。配置了autoUpload=false，在父资源保存成功的订阅完成回调中调用uploadFiles()方法，但控制台无错误，未发起上传请求，upload事件也未触发。已通过Stackblitz验证uploadFiles()方法本身可正常工作，但项目中无法生效。

相关代码 #

HTML代码

<div class="wr-btn-style wr-btn-style--primary kendo-upload-container">
    <kendo-upload 
        #kendoUpload 
        [saveUrl]="'resources/admin/upload-resources-documents'"
        [restrictions]="fileRestrictions" 
        [autoUpload]="false"
        (uploadProgress)="uploadProgress($event)"
        (upload)="uploadEventHandler($event)"
        (select)="selectEventHandler($event)">
        <ng-template kendoUploadFileInfoTemplate let-files>
            <div class="width-50">
                <mat-form-field appearance="outline">
                    <mat-label>Button Text</mat-label>
                    <input matInput formControlName="FileBtnText" maxLength="50">
                    <mat-hint>{{fileBtnTxt}}</mat-hint>
                </mat-form-field>
            </div>
        </ng-template>
        <kendo-upload-messages select="Select File" dropFilesHere="Drag and Drop here">
        </kendo-upload-messages>
    </kendo-upload>
</div>

组件核心逻辑

@ViewChild('kendoUpload') kendoUpload : UploadComponent;

this.resourceService.saveResource(request)
    .pipe(takeUntil(this.componentDestroyed$))
    .subscribe((x : IResourceResponseDto) => {
        if(x) {
            this.returndResource = x;
            this.snackBar.success("Successfully saved resource");
            this.overallForm.markAsPristine();
        }
    }, (error) => {
        this.snackBar.error("Error saving resource");
    }, () => this.kendoUpload.uploadFiles());

Upload事件处理函数

uploadEventHandler(event: UploadEvent) {
    if(!this.overallForm.valid)
        return;

    let { SectionId, ResourceId } = this.returndResource;
    let data = {
        Files: event.files,
        SectionId: SectionId,
        ResourceId: ResourceId
    };

    event.data = data;
}

排查方向 #

1. 确认文件队列是否存在有效文件 #

调用uploadFiles()前，先检查Upload组件的文件队列是否为空：

() => {
    console.log('文件队列长度:', this.kendoUpload.files.length);
    this.kendoUpload.uploadFiles();
}

如果输出为0，说明选中的文件未被保留在队列中，可能是select事件处理函数中存在移除文件的逻辑，或是自定义模板干扰了组件内部状态。

2. 验证订阅的完成回调是否执行 #

在完成回调中添加日志，确认是否真的执行到了uploadFiles()：

() => {
    console.log('进入完成回调，准备触发上传');
    this.kendoUpload.uploadFiles();
}

如果未打印该日志，说明saveResource返回的Observable没有触发complete事件。需检查服务端接口是否正确完成响应，或是Observable是否在next后手动调用了complete()。

3. 排除自定义模板的干扰 #

临时移除kendoUploadFileInfoTemplate模板，恢复默认UI后测试是否能正常触发上传。如果移除后正常，说明自定义模板中的表单控件或逻辑影响了Upload组件状态——比如表单控件的formControlName绑定与组件内部状态冲突，或是模板渲染导致组件丢失了文件引用。

4. 确认组件实例是否有效 #

检查kendoUpload实例是否正确获取：

() => {
    console.log('Upload组件实例:', this.kendoUpload);
    if(this.kendoUpload) {
        this.kendoUpload.uploadFiles();
    } else {
        console.error('未获取到Upload组件实例');
    }
}

如果实例为undefined，可能是@ViewChild的查询时机问题，可以尝试添加{ static: false }参数（Angular 8+），或是确保在组件视图初始化完成后再执行操作。

5. 检查文件是否符合上传限制 #

验证选中的文件是否满足fileRestrictions的要求（比如大小、类型）。如果文件不符合限制，Kendo Upload会将其标记为无效，uploadFiles()不会触发上传。可通过以下代码查看文件验证状态：

() => {
    this.kendoUpload.files.forEach(file => {
        console.log('文件验证错误:', file.validationErrors);
    });
    this.kendoUpload.uploadFiles();
}

6. 核对Kendo UI版本差异 #

对比Stackblitz和项目中Kendo UI的版本，某些旧版本可能存在uploadFiles()方法的bug。可以尝试升级Kendo Upload到最新稳定版本，或是查看官方文档确认版本兼容性。

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