如何發佈表單數據和文件在同一個提交與.NET 4核心的角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不會被映射並且爲null。

我也試過單獨把他們（只是嘗試）：

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

（這顯然是行不通的，因爲在角服務，我不能送2「身體」元素）。使用這種方法furnizorResource數據是正確的，但當然文件爲空...

如何在Angular 4.3.6和ASP.NET Core 2中同時發佈Json數據和文件？

Answer 1

我明白你的兩個，角和C＃必須是財產fornitureResources，這將是FornitureResource的陣列

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

所以，如

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

如果發送 「myforniture」 使用this.http.post（ '/ API/furnizor'，myforniture），你必須是你的API中得到一個 「Forniture」

Answer 2

您是否嘗試過類似的東西？這是我在我的應用程序中使用它的方式，它的工作原理。

var formData = new FormData() 
for (var key in model) 
    formData.append(key, furnizor[key]) 

formData.append('file', fileToUpload) 

let headers = new Headers({ 'Content-Type': 'multipart/form-data' }) 
let options = new RequestOptions({ headers: headers }) 
return this.authHttp.post('/api/furnizor', formData, options).map(res => res.json())