Как разместить formData с машинописной моделью в angular6 и asp.net core 2 webapi - PullRequest
Новая
       48

Как разместить formData с машинописной моделью в angular6 и asp.net core 2 webapi

0 голосов
/ 26 июня 2019

У меня есть следующая модель в веб-интерфейсе asp.net core 2: 

public class MainVM
{
        public int ID { get; set; }
        public string Name { get; set; }
        public bool IsActive { get; set; }
        public int DepartmentID { get; set; }
        public IFormFile Logo { get; set; }
        public List<ChildVM> ListChilds { get; set; }

}

public class ChildVM
{
        public string Name { get; set; }
        public int SequenceNo { get; set; }
        public int NoOfPrices { get; set; }
        public IFormFile Image { get; set; }
}

и конечная точка: 

[HttpPost]
[Consumes("multipart/form-data")]
public void Post([FromForm]MainVM data)
{
}

Служба Angular6, которую я использую для публикации данных из Angular: 

addData(mydata: MainVM, logo: File, myImages: File[]): Observable<MainVM> {

    const formData: FormData = new FormData();
    formData.append('Logo', logo, logo.name);
    if (myImages && myImages.length > 0) {
      for (var i = 0; i < myImages.length; i++) {
        formData.append('ListChilds[].Image', myImages[i], myImages[i].name);
      }
    }
    formData.append('data', new Blob([JSON.stringify(mydata)], { type: 'application/json' }));

    console.log(formData);
    return this.http.post<MainVM>('http://localhost:60458/api/mycontroller/', formData, httpOptions).pipe(
      map((res) => { console.log('res'); return res; }),
      catchError(this.handleError('lpc', null))
    );
  }

Теперь проблема, с которой я сталкиваюсь, заключается в том, что он получает только логотип на веб-интерфейсе, все остальные поля остаются пустыми.

Я думаю, что что-то упустил. Пожалуйста, ведите меня.

Спасибо.

1 Ответ

0 голосов
/ 04 июля 2019

Наконец я нашел решение: Прежде всего, я изменил свои модели, я удалил следующую строку из ChildVM: 

public IFormFile Image { get; set; }

и добавил следующую строку в MainVM: 

public List<IFormFile> ListImages{ get; set; }

Я сделал это, потому что обнаружил, что в Asp.net Core 2.2 есть какая-то ошибка, из-за которой, если мы выберем тип IFormFile в подмодели, Asp.net Core 2.2 начнет зависать (подробности в ссылке ниже):

https://github.com/aspnet/AspNetCore/issues/4802

Теперь на стороне клиента я изменил модели соответственно, и изменения в обслуживании следующие: 

addData(mydata: MainVM, logo: File, myImages: File[]): Observable<MainVM> {

  const formData: FormData = new FormData();
  formData.append('Logo', logo, logo.name);
  this.buildFormData(formData, mydata, null);
  if (myImages && myImages.length > 0) {
    for (var i = 0; i < myImages.length; i++) {
      formData.append('ListImages', myImages[i], myImages[i].name);
    }
  }
 console.log(formData);
 return this.http.post<MainVM>('http://localhost:60458/api/mycontroller/', formData, httpOptions).pipe(
  map((res) => { console.log('res'); return res; }),
  catchError(this.handleError('lpc', null))
 );
}

buildFormData(formData, data, parentKey) {
  if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
   Object.keys(data).forEach(key => {
     console.log(key);
     this.buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
   });
 } 
 else {
     const value = data == null ? '' : data;

     formData.append(parentKey, value);
  }
 }
...