如何在 .NET Core 中使用 Angular 4 在同一个提交中发布表单数据和文件

Question

我正在尝试在供应商表中添加一个新条目。该表还有另一个与之链接的表，其中存储了与每个供应商的合同。所需的功能是以相同的形式提交新供应商和合同的数据，但我无法使其工作。

我可以通过以另一种形式单独上传文件来添加新供应商并在合同之后，但不能在同一个提交操作中。

我怎样才能做到这一点？

我的表格是这样的：

<form class="form-material m-t-40" enctype="multipart/form-data">

    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="denumire" class="label-has-danger"> Denumire furnizor </label></h4>
        <input type="text" id="denumire" name="denumire" class="form-control" placeholder="Denumire" [(ngModel)]="furnizor.denumire" #denumire="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="cod" class="label-has-danger"> Cod intern furnizor </label></h4>
        <input type="text" id="cod" name="cod" class="form-control" placeholder="Cod intern" [(ngModel)]="furnizor.cod" #cod="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="cod" class="label-has-success"> Cod de inregistrare fiscala furnizor </label></h4>
        <input type="text" id="codIntern" name="codIntern" class="form-control" placeholder="Cod" [(ngModel)]="furnizor.codIntern" #codIntern="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="adresa" class="label-has-success"> Adresa </label></h4>
        <input type="text" id="adresa" name="adresa" class="form-control" placeholder="Adresa" [(ngModel)]="furnizor.adresa">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="persoanaContact" class="label-has-success"> Persoana Contact </label></h4>
        <input type="text" id="persoanaContact" name="persoanaContact" class="form-control" placeholder="Persoana Contact" [(ngModel)]="furnizor.persoanaContact" #reprezentant="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="telefon" class="label-has-success"> Telefon </label></h4>
        <input type="tel" id="telefon" name="telefon" class="form-control" placeholder="Telefon" [(ngModel)]="furnizor.telefon" #telefon="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="dataIncepereContract" class="label-has-success"> Data incepere contract </label></h4>
        <input type="date" class="form-control m-b-40" placeholder="2017-06-04" id="dataIncepereContract" name="dataIncepereContract" [(ngModel)]="furnizor.dataIncepereContract" #dataIncepereContract="ngModel">
    </div>

    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="dataExpirareContract" class="label-has-success"> Data expirare contract </label></h4>
        <input type="date" class="form-control m-b-40" placeholder="2017-06-04" id="dataExpirareContract" name="dataExpirareContract" [(ngModel)]="furnizor.dataExpirareContract" #dataExpirareContract="ngModel">
    </div>

    <input type="file" #fileInput>

    <button type="button" class="btn btn-md btn-add animated flipInX flipInY lightSpeedIn slideInUp" (click)="submit()">
        <i class="fa fa-floppy-o"></i> Save
    </button>
</form>

我为文件和其他表单字段尝试了很多选项和组合，但都没有奏效。

我的 ts 文件读取文件输入是这样的：

...

@ViewChild('fileInput') fileInput: ElementRef;

...
submit() {
   var nativeElement: HTMLInputElement = this.fileInput.nativeElement;

   if (nativeElement.files) this.file = nativeElement.files[0];
   this.furnizorService.create(this.furnizor, this.file).subscribe(() => {});
}

我的服务：

create(furnizor: any, fileToUpload: any) {

    let input = new FormData();
    input.append("file", fileToUpload);

    furnizor.file = input;

    return this.http.post('/api/furnizor', furnizor).map(res => res.json());
}

在我的 C# 控制器中，我尝试了：

[HttpPost("/api/furnizor")]
    public async Task<IActionResult> CreateFurnizor([FromBody]FurnizorResource furnizorResource)
    {
    ...
    }

我在哪里添加了一个新属性

public IFormFile file { get; set; }

在 FurnizorResource 中，但如果我这样做，则 furnizorResource 未映射并且为空。

我也尝试分别发送它们（只是为了尝试）：

[HttpPost("/api/furnizor")]
public async Task<IActionResult> CreateFurnizor([FromBody]FurnizorResource furnizorResource, IFormFile file)
{
...
}

（这显然不起作用，因为在 Angular 服务中我不能发送 2 个“body”元素）。使用这种方法，furnizorResource 数据是正确的，但当然文件为空...

如何在 Angular 4.3.6 和 ASP.NET Core 2 中同时发布 Json 数据和文件？

Answer 1

我知道你的 Angular 和 c# 都必须是 fornitureResources 的属性，它将是 FornitureResource 的数组

interface Forniture
{
    cod:number;
    ...
    fornitureResources :IFromFile[]
 }

所以，例如

let myforniture={
     cod:1,
     ...
     fornitureResources:[
         { file:"file1"},
         { file:"file2"}
     ]
  }

如果您使用 this.http.post('/api/furnizor', myforniture) 发送“myforniture”，您必须在 API 中获得“Forniture”