如何让Kendo Angular Upload上传文件时附带其他自定义JSON参数

Kendo UI for Angular 提供的 Upload 组件原生支持追加自定义表单参数，只需两步修改官方示例代码即可实现需求：

1. 模板中绑定 upload 事件 #

给 kendo-upload 组件添加 upload 事件绑定，该事件会在文件上传请求发送前触发：

<kendo-upload
  [saveUrl]="yourSaveApiUrl"
  [removeUrl]="yourRemoveApiUrl"
  [autoUpload]="true"
  (upload)="handleUpload($event)"
>
</kendo-upload>

替换yourSaveApiUrl、yourRemoveApiUrl为你实际的后端接口地址。

2. 组件类中追加自定义参数 #

在事件回调函数内操作FormData对象，追加username、description、uploadtypeid等自定义参数后手动触发上传：

import { Component } from '@angular/core';
import { UploadEvent } from '@progress/kendo-angular-upload';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html'
})
export class FileUploadComponent {
  // 替换为实际接口地址
  public yourSaveApiUrl = '/api/upload/save';
  public yourRemoveApiUrl = '/api/upload/remove';

  public handleUpload(e: UploadEvent): void {
    // 阻止默认上传行为，先完成参数追加
    e.preventDefault();
    const uploadFormData = e.formData;
    
    if (uploadFormData) {
      // 追加自定义参数，支持动态绑定变量
      uploadFormData.append('username', 'testUser');
      uploadFormData.append('description', '这是上传文件的描述信息');
      uploadFormData.append('uploadtypeid', '2');
      
      // 手动触发上传请求
      e.uploadFiles();
    }
  }
}

注意事项 #

• 自定义参数如果来自用户输入的表单字段，直接替换示例中的固定值为对应表单变量即可
• 后端无需调整文件接收逻辑，按照普通FormData字段的读取规则就能获取到自定义参数
• 多文件批量上传场景下，如果需要给不同文件配置不同参数，遍历e.files数组单独追加对应参数即可

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