帶有其他 JSON 參數的 Kendo Angular 上傳文件

Question

我在我們的 Angular 應用程序中使用 KendoUI，我們需要上傳一個文件到后端，其中包含用戶名、描述、上傳類型 ID 等其他詳細信息，如下圖所示

我已經檢查了可用的劍道上傳功能，但它只接受要上傳的文件。如何對以下 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);
  }
}