未配置[saveUrl]时Kendo UI Angular Upload为何仍发送请求？

问题原因 #

Kendo UI Angular的Upload组件在触发(upload)事件时，默认会执行内置的上传请求逻辑——哪怕你没配置[saveUrl]，组件也会尝试向空地址发送请求。就算你在事件回调里写了自定义上传代码，组件的默认行为还是会触发，导致额外的请求发送。

解决方法 #

在(upload)事件的回调函数里，调用事件对象的preventDefault()方法，直接阻止组件的默认上传行为，这样就只会执行你自己编写的自定义上传逻辑。

修改后的关键代码（home.component.ts） #

public uploadFiles(event:UploadEvent): void {
    // 阻止组件默认上传行为，避免额外请求
    event.preventDefault();
    debugger;
    if (this.fileSource) {
        const fileViewCreateModel = new FileViewCreateModel();
        fileViewCreateModel.file = event.files;
        fileViewCreateModel.filePath = this.toCollectPath();

        this._serviceFile.addFile(fileViewCreateModel).subscribe({
            next: (response) => {
                this.getAll(this.skip, this.pageSize)
                this.clearSelectFiles();
            },
            error: (err) => {
                this.getAll(this.skip, this.pageSize)
                this.clearSelectFiles();
            },
        });
    }
}

额外提示 #

如果你的删除操作也用了自定义逻辑，同样需要在handleFileRemoved方法里调用event.preventDefault()，阻止组件默认的删除请求。

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