使用其他JSON参数的Kendo角度上传文件

Question

我使用KendoUI在我们的Angular应用程序中，我们需要上传一个文件到后端与其他详细信息，如用户名，描述，上传类型I，如下图所示

​

我已经检查了可用的kendo上传功能，但它只接受文件上传.How我可以对下面的stackblitz进行更改，以便我可以容纳其他请求正文参数。

kendo-upload

Answer 1

在我看来，这个问题的解决方案是自己处理窗体，而不是让控件执行文件上载。首先应将autoUpload设置为false，以防止控件在选择文件后立即上载图像。然后，您可以手动处理select和remove事件，以获得对用户选择的文件的控制，然后使用这些文件和其余字段构建您自己的有效负载：

<kendo-upload
  [autoUpload]="false"
  (select)="handleFileSelected($event)"
  (remove)="handleFileRemoved($event)">
</kendo-upload>

在.ts中，您应该有一个用来跟踪文件的字段，以及select和remove事件的处理程序：

private files: FileInfo[] = [];

handleFileSelected(event: SelectEvent) {
  const newFiles = event.files.filter(
    (f) => !this.files.find((existingFile) => existingFile.name == f.name)
  );
  this.files = [...this.files, ...newFiles];
}

handleFileRemoved(event: RemoveEvent) {
  this.files = this.files.filter((f) => event.files.indexOf(f) === -1);
}

从您的屏幕截图中，我可以看到您只需要一个文件，因此处理程序可以变得更简单：

private file: FileInfo;

handleFileSelected(event: SelectEvent) {
  this.file = event.files.slice().shift();
}

handleFileRemoved(event: RemoveEvent) {
  this.file = null;
}

然后，您可以将该文件传递给服务中的save方法：

handleSave() {
  this.service.saveUpload(
    this.uploadTypeId,
    this.description,
    this.uploadedUserId,
    this.file?.rawFile
  ).subscribe(res => {
    console.log('successfully saved', res);
  }
}