Kendo FileSelect无法随普通表单提交，与原生file输入差异咨询

我在HTML表单中使用了Kendo FileSelect组件，同时包含复选框等其他表单元素。后端能正常接收其他字段内容，但Kendo FileSelect的文件内容无法正确提交。测试添加原生file输入后，选择同一文件能被包含在POST请求中，而Kendo FileSelect仅提交空的application/octet-stream。想知道Kendo FileSelect与原生file输入行为是否不同？能否通过普通表单提交？

相关代码与请求体 #

HTML代码 #

<div>
    <kendo-fileselect
        #fileSelect
        name="fileSelect"
        formControlName="fileSelect"
        [multiple]="false"
        [restrictions]="uploadRestrictions"
    >
    </kendo-fileselect>
</div>
<div>
    <input type="file" name="filePath" />
</div>

POST请求体 #

------geckoformboundary198f09eb5dd7819ca937be21fbe01fe0
Content-Disposition: form-data; name="fileSelect"; filename=""
Content-Type: application/octet-stream

------geckoformboundary198f09eb5dd7819ca937be21fbe01fe0
Content-Disposition: form-data; name="filePath"; filename="mydata.csv"
Content-Type: application/vnd.ms-excel

a,b,c
1,2,3
x,y,z

解答 #

行为差异说明 #

Kendo FileSelect和原生file输入行为确实不同：

• 原生file输入是浏览器原生控件，选中文件后会自动将文件数据绑定到表单的FormData中，随表单提交一起发送，所以后端能正常接收。
• Kendo FileSelect是封装的UI组件，仅提供文件选择的交互和UI展示，默认不会自动把选中的文件加入表单的提交数据流，所以直接提交表单时只会发送空的application/octet-stream。

能否通过普通表单提交？ #

可以，但需要手动处理文件数据的提交：

方法1：手动构建FormData提交

在表单提交时，手动收集Kendo FileSelect选中的文件，加入到FormData中，再发送请求：

// 组件类中的提交处理方法
onSubmit(form: NgForm) {
  const formData = new FormData();
  
  // 加入Kendo FileSelect选中的文件
  const selectedFile = this.fileSelect.selectedFiles[0];
  if (selectedFile) {
    formData.append('fileSelect', selectedFile, selectedFile.name);
  }
  
  // 加入其他表单字段
  Object.keys(form.value).forEach(key => {
    if (key !== 'fileSelect') {
      formData.append(key, form.value[key]);
    }
  });
  
  // 发送POST请求
  this.http.post('/your-upload-api', formData).subscribe(res => {
    // 处理响应逻辑
  });
}

方法2：替换为Kendo Upload组件（推荐）

如果你的场景需要完整的上传功能，Kendo Upload组件支持自动处理FormData构建，可直接配合表单提交，无需手动处理文件数据。

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