Неопределенное значение изображения с использованием Angular 8 Form и Multer

Question

Я работаю над регистрацией регистрации, используя angular 8 и multer, и все отлично работает , используя почтальона , но когда я использую форму angular, я сталкиваюсь и "undefined" файл изображения объекта.

пользователь. js (узел)

const _ = require('lodash');
const express = require('express');
const multer = require('multer');

const auth = require('../middleware/auth');
const { User, validate, sendWelcomeEmail } = require('../models/user');

const router = express.Router();

const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, './uploads');
  },
  filename: function(req, file, cb) {
    cb(null, Date.now() + file.originalname)
  }
})

const fileFilter = (req, file, cb) => {
  if (file.mimetype == 'image/jpeg' || file.mimetype == 'image/png') {
    cb(null, true);
  } else {
    cb(new Error('Image type not supported'), false);
  }
}

const upload = multer({
  storage: storage,
  limits: {
    fileSize: 1024 * 1024 * 5
  },
  fileFilter: fileFilter
});

const avatar = upload.single('photo');

// Create
router.post('/', avatar, async (req, res) => {

  console.log('AVATAR:', req.file); // <- undefined error here only with angular request!
  ...

});

module.exports = router;

sign-up.component.ts (angular)

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { UserModel } from 'src/app/core/models/user.model';
import { ApiService } from 'src/app/core/services/api.service';

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

  signUpForm: FormGroup;
  avatar;

  constructor(
    private formBuilder: FormBuilder,
    public apiService: ApiService,
  ) {
    this.createForm();
  }

  ngOnInit() {}

  createForm() {
    this.signUpForm = this.formBuilder.group({
      name: ['', Validators.required ],
      photo: ['']
    })
  }

  selectImage(event) {
    if (event.target.files.length > 0) {
      this.avatar = event.target.files[0];
    }
  }

  onSubmit() {
      let user = new UserModel();
      user = {
        name: this.f.name.value,
        photo: this.avatar
      }

      this.apiService.signUp(user).subscribe(
        (res: any) => {
          console.log('sign up!');
        }, (err) => {
          console.log('Error...');
        }
      )
  }

  get f() { return this.signUpForm.controls; }

}

регистрация.компонент. html

<form [formGroup]="signUpForm" autocomplete="off" (ngSubmit)="onSubmit()" enctype="multipart/form-data" accept="image/png, image/jpeg">
        <div class="form-group">
          <label for="name">Name:</label>
          <input
            type="text"
            formControlName="name"
            id="suName"
            autocomplete="off"
          />
        </div>
        <div class="form-group">
          <label for="photo">Profile photo:</label>
          <input
            type="file"
            formControlName="photo"
            name="photo"
            id="suPhoto"
            multiple
            (change)="selectImage($event)"
          />
        </div>
        <button type="submit">
          Create account
        </button>
      </form>

Я что-то упустил в форме angular?