Kendo Angular 使用其他 JSON 参数上传文件

Question

我在 Angular 应用程序中使用 KendoUI，我们需要将文件上传到后端，其中包含其他详细信息，例如用户名、描述、上传类型 ID，如下图所示

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

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;
}

然后您可以将文件传递给您服务中的保存方法：

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

Kendo Angular 使用其他 JSON 参数上传文件

Kendo Angular upload file with other JSON parameters

kendo-ui

typescript

kendo-ui-angular2

angular