Angular 到 ASP.NET Core Web API 为所有属性、对象传递返回 NULL（一个属性是 IFormFile）

Question

我正在尝试将 Angular 对象发送到 ASP.NET Core Web API。除 ID 外，所有属性均显示为空。

网络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":"你成为你所想的","AuthorName":"Shubham Kumar Singh", "价格":"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: "multpart/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();
}