Веб-API ASP.NET Core получает тело запроса, содержащее IFormFile, но все свойства имеют значение null из Angular

Я пытаюсь отправить тело запроса, которое является объектом из Angular, в веб-API ASP.NET Core. Все свойства имеют значение null, кроме 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 отображает все свойства null, кроме BookID (0).

Запросить полезную нагрузку в сети:

{
  "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":  {}
}

Что я делаю не так? Пожалуйста, помогите мне.

Можете ли вы включить опубликованный JSON, пожалуйста? В браузере просто откройте devtools (f12), откройте вкладку сети, выполните почтовый запрос и скопируйте полезную нагрузку.

Pieterjan 13.04.2024 19:52

Запросить полезную нагрузку: {"BookID":0,"ISBNNo":"ISBN 0-091-96234-1","BookName":"Вы становитесь тем, что думаете","AuthorName":"Шубхам Кумар Сингх","Price" :"23","BookImage":"galaxyInterio2.jpg","Operat‌​ionMode":"ADD","Form‌​File":{}}

Ujjwal Das 14.04.2024 01:16

Заголовок запроса: Принять: application/json Тип контента: application/json; charset=UTF-8 Реферер: localhost:4200 Sec-Ch-Ua: "Google Chrome";v = "123", "Not:A-Brand";v = "8", "Chromium";v= «123» Sec-Ch-Ua-Mobile: ?0 Sec-Ch-Ua-Платформа: «Windows» Пользовательский агент: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, например Gecko) Chrome /123.0.0.0 Сафари/537.36

Ujjwal Das 14.04.2024 01:16

Попробуйте заменить [FromForm] на [FromBody].

Pieterjan 14.04.2024 01:27

Это выдает исключение в консоли. Метод WebApi не сработал. { "headers": { "normalizedNames": {}, "lazyUpdate": null, "headers": {} }, "status": 0, "statusText": "Неизвестная ошибка", "url": "localhost :5159/api/Books ", "ok": false, "name": "HttpErrorResponse", "message": "Ответ об ошибке HTTP для localhost:5159/api/Books: 0 Неизвестная ошибка", "ошибка ": { "isTrusted": true } }

Ujjwal Das 14.04.2024 04:42
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
5
63
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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();
}

Другие вопросы по теме