Отправить изображение в форме, используя angular и asp.net core

Question

Как я могу отправить форму с файлом типа ввода на основной контроллер asp.net, все сразу, используя Angular?

мой шаблон:

<form [formGroup]="form" (ngSubmit)="onSubmit()" enctype="multipart/form-data"> 
      <input placeholder="User name" type="text" formControlName="userName"/>
      <input placeholder="Email" type="text" formControlName="email"/>
      <input type="file" formControlName="file">

      <button type="submit">Salvar</button>
</form>

Файл компонента:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { UserService } from 'app/shared/services/user/user.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-my-account',
  templateUrl: './my-account.component.html',
  styleUrls: ['./my-account.component.scss']
})
export class MyAccountComponent implements OnInit  {

  form = this.fb.group(
    {
      id: [null],
      userName: [{ value: null, disabled: true }],
      email: [null, Validators.required],
      file: [null]
    }
  );

  constructor(
    private fb: FormBuilder,
    private userServices: UserService,
    private router: Router
  ) {
  }

  ngOnInit() {

    this.userServices.getCurrentUser().subscribe( x => {
      this.form.patchValue(x);
    });
  }

  onSubmit() {
    this.userServices.update(this.form.getRawValue()).subscribe( () => {
      this.router.navigate(['/']);
    });
  }

}

UserServices

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from 'app/models/authentication/user';

@Injectable({ providedIn: 'root' })
export class UserService {
    constructor(private http: HttpClient) { }


    getCurrentUser(): Observable<User> {
      return this.http.get<User>('/Users/GetCurrentUser');
    }

    update(user: User) {
        return this.http.post('/users/update', user);
    }

}

Класс пользователя:

export class User {
    id: string;
    userName: string;
    email: string;
    file: File;
    token: string;
}

и контроллер:

[HttpPut]
public async Task<IActionResult> Update([FromBody]ViewModels.Account.EditViewModel viewModel, IFormFile file)
{
    if (ModelState.IsValid)
    {
        if (file != null)
        {
            var path = Path.Combine(hostEnvironment.WebRootPath, "datafiles", "images", "users");
            model.Logo = FileUploadUtils.SaveToServer(path, file, new string[] { "jpg", "jpeg", "png" });


        ....

Параметр file вконтроллер всегда нулевой.

Что мне не хватает?

Answer 1

Удалите IFormFile file из параметров метода контроллера и определите его в свой ViewModelClass EditViewModel

Answer 2

Вы должны отправить файл, используя составной MIME-тип в качестве другой конечной точки отдыха.Чтобы добиться этого на внешней стороне, используйте объект FormData.

const file = input.files[0]; // data from input file
const formData = new FormData();
formData.append('file', file);

// In service
updateUserFile(formData: FormData) {
    return this.http.post('/users/update', formData);
}