5

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

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

我怎样才能做到这一点？

我的表格如下所示：

<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 数据和文件？

4

2 回答 2

1

你有没有尝试过这样的事情？这就是我在我的应用程序中使用它的方式，它可以工作。

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())
于 2017-10-04T07:27:36.067 回答
-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”

于 2017-10-04T07:07:40.247 回答