使用 FormData 将参数 Angular 10 的文件上传到 .Net Core Web API

Question

我正在寻找一种使用 FormData 将参数表单与文件一起附加的方法。

所以我有一个文件输入和一个包含许多参数的表单。

这是我发送文件的方式：

 let formData=new FormData();
 formData.append("file",<File>this.file);

这是我的表格：

 this.fileForm = this.fb.group({
  headline: [],
  fileType: [],
  fileCategory: [],
  fileEssence: []
});

我试过像这样添加表单值：

 formData.append("params",this.fileForm.value);

但我在 C# 代码中找不到它：

var form= Request.Form;

只带文件对象

还有其他方法吗？

更新：

这是我在angular中的上传功能：

  save(){
   let formData=new FormData();
   formData.append("file",<File>this.file);
   formData.append("parameters",this.fileForm.value);
   this.fileService.uploadFile(formData).subscribe((res)=>{
  console.log(res);
})

}

文件服务：

 uploadFile(fileUpload: any): Observable<any> {
    return this.http.post(ApiConsts.uploadFile, fileUpload).pipe(
        map((res: any) => res))
}

C# 函数：

   public IActionResult UploadFile([FromForm] FileUploadDTO parameters, [FromForm] IFormFile file)
    {
    }

FileUploadDTO class:

public class FileUploadDTO
{
 
    public FileCategory fileCategory { get; set; }
    public FileEssence fileEssence { get; set; }
    public FileType fileType { get; set; }
    public string  headline { get; set; }

}

参数 var 为空，不为空，但所有值均为空。

Answer 1

到 formData 您可以附加 blob 或字符串。因此，您可以将值附加到 formData 并将其发送到后端。在后端，您可以通过 FromForm 属性获取 post 参数。

这是我的例子：

const formData = new FormData(); 
formData.append('file', this.file);
formData.append('fileType', this.fileForm.get('fileType').value);
formData.append('fileCategory', this.fileForm.get('fileCategory').value);

在后端获取 formData：

public void FormHandler([FromForm] string fileType, [FromForm] string fileCategory, [FromForm] IFormFile file){
// do the stuff
}

使用 FormData 将参数 Angular 10 的文件上传到 .Net Core Web API

Upload file with parameters Angular 10 to .Net Core Web API using FormData

c#

angular

form-data