如何在angular6和ASP.NET Core 2 WebAPI中使用TypeScript模型發布FormData

Question

我在asp.net core 2 Web API中具有以下模型：

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)
{
}

我用來從angular發布數據的Angular6服務：

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))
    );
  }

現在我面臨的問題是它僅在Web api上收到徽標，所有其他字段保持為空。

我想我缺少了一些東西。 請指導我。

謝謝。

Answer 1

最終，我找到了解決方案：首先，我更改了模型，從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);
  }
 }