ASP.NET Core Web API 接收包含 IFormFile 的请求正文，但来自 Angular 的所有属性均为 null

Question

我正在尝试发送一个请求正文，它是从 Angular 到 ASP.NET Core Web API 的一个对象。除了

ID

之外，所有属性均显示为 null。

网络API：

public class Book
{
    public int BookID { get; set; }
    public string? ISBNNo { get; set; }
    public string? BookName { get; set; }
    public decimal? Price { get; set; }
    public string? AuthorName { get; set; }
    public string? BookImage { get; set; }
    public string? OperationMode { get; set; }
    public IFormFile? FormFile { get; set; }
}

在 Angular 中，这是我的课程：

成分：

postdata(angBook: any) {
  if (this.angBook.valid) {
    const UIFormData: Book = this.angBook.value;
    const formFileData = new FormData();
    if (!UIFormData.BookID) {
      UIFormData.OperationMode = "ADD";
      UIFormData.BookID = 0;      
    } else {
      UIFormData.OperationMode = "EDIT";
    }

    if (this.file) {
      formFileData.append("file", this.file, this.file.name);
      UIFormData.FormFile = formFileData;              
      UIFormData.BookImage= this.file.name;
    }
    this.dataService.ObjBookAddModify(UIFormData);
  }
}

角度服务：

/**** To send Data to DB through Object */
public ObjBookAddModify(BookParameter: Book) {
  var headers = new HttpHeaders({
    "Content-Type": "application/json; charset=utf-8",
    "Accept": "application/json"
  });
  
  this.httpClient.post<any>(this.baseUrl + '/Books', JSON.stringify(BookParameter),{
    headers: headers})
    .subscribe();
}

ASP.NET Core 控制器对象显示除

BookID

(0) 之外的所有属性均为 null。

在网络中请求负载：

{
  "BookID": 0, 
  "ISBNNo": "ISBN 0-091-96234-1", 
  "BookName": "You Become What You think", 
  "AuthorName": "Shubham Kumar Singh", 
  "Price": "23", 
  "BookImage": "galaxyInterio2.jpg", 
  "OperationMode": "ADD", 
  "FormFile":  {}
}

我做错了什么？请帮助我。

Answer 1

您没有将表单数据正确发布到您的 API。目前，您正在以 JSON (

"Content-Type": "application/json"

) 形式发送请求正文，但您的 API 需要使用

"Content-Type": "multipart/form-data"

的请求。

postdata(angBook: any) {
  if (this.angBook.valid) {
    const UIFormData: Book = this.angBook.value;

     if (!UIFormData.BookID) {
       UIFormData.OperationMode = "ADD";
       UIFormData.BookID = 0;      
     } else {
       UIFormData.OperationMode = "EDIT"
     }

     if (this.file) {
       UIFormData.FormFile = this.file;              
       UIFormData.BookImage = this.file.name;
     }

     this.dataService.ObjBookAddModify(UIFormData);
  }
}

如下所示，HTTP 请求将默认以

"Content-Type": "multipart/form-data"

发送。

public ObjBookAddModify(BookParameter: Book) {
  let formData = new FormData();

  for (k in BookParameter) {
    formData.append(k, BookParameter[k]);
  }
  
  this.httpClient.post<any>(this.baseUrl + '/Books', formData)
    .subscribe();
}