フォームのデータとファイルを.NET CoreのAngular 4と同じサブミットで投稿する

Question

Suppliersテーブルに新しいエントリを追加しようとしています。このテーブルには、各サプライヤとの契約が格納されている別のリンクもあります。 希望の機能は、新しいサプライヤのデータと契約書の両方を同じ形式で提出することですが、動作させることはできません。

新しいサプライヤを追加することができました。契約後に別のフォームでファイルをアップロードしてアップロードできますが、同じ送信アクションではアップロードできません。

私はそれをどのように行うことができますか？私は、ファイルや他のフォームフィールドが、どれも作業のためのオプションとの組み合わせの多くを試してみました

<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> 

：

私のフォームはこのようになります。

... 

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

マイTSファイルは、このようなファイルの入力を読み取り新しいプロパティ

FurnizorResourceの

ですが、これを行うと、furnizorResourceはマップされず、nullになります。

私も（ちょうどしようとするために）それらを別々に送信してみました：

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

（角度サービスで、私は2「身体」の要素を送信することはできませんので、明らかに動作しません）。このメソッドを使用すると、furnizorResourceデータは正しいですが、もちろんファイルはnullです...

Angels 4.3.6とASP.NET Core 2に同時にJsonデータとファイルを投稿する方法はありますか？

Answer 1

私はあなたの両方の、角度およびC＃は、例えば、それはとてもFornitureResource

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

の配列になることを財産fornitureResourcesでなければならないことを理解し

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

あなたがthis.http.postを使用して "myforniture"（ '/ API/furnizor'、myforniture）を送信した場合、あなたのAPI

Answer 2

で "Forniture" を取得する必要がありますが、あなたはそのような何かを試してみました？それは私のアプリでそれを使用するtehの方法です、それは動作します。私は両方とも、角度およびC＃は、それが契約 インタフェースIForniture {タラの配列であろう性契約でなければならないことを理解

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())