我在从组件代码上传所选文件时遇到了一些问题,我选择采用组件代码路线的原因是我需要在创建整个父聚合对象后上传这些文件。这样我最终可以将所需的 ID 分配给我的底层请求的有效负载。
我的 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());
这里的想法是,在我们成功保存资源后,我们返回一个包含新创建的 ID 的有效负载,然后在订阅成功完成后我们可以调用上传函数。但是,我在控制台中没有看到任何错误,也没有看到前端对我的端点的任何调用。我也没有看到它击中了我的上传事件处理程序,因为它是在这里定义的:
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;
}
作为健全性检查,我做了一个小的 stackblitz 只是为了验证 uploadFiles() 方法是否确实有效并且确实触发了上传,看起来确实如此。 我究竟哪里出了问题?
我真是个白痴,问题是我试图上传一个不属于我的文件限制的文件。完全忘记了