Почему изображение не будет загружено из Angular в Multer по запросу POST без ошибок?

Question

Я пытаюсь создать регистрационную форму в Angular 2+, которая содержит несколько текстовых полей и изображение, которое будет загружено Multer и использовано в профиле. Изображение не загружается, даже если все отправленные сообщения ожидаются для изображения и "req.file" не определено. Более запутанно то, что он работает с почтальоном (вообще без заголовков). Я ожидаю, что проблема с внешним интерфейсом

export class RegisterComponent implements OnInit {

constructor(private registerservice: RegisterService, private router: Router) {}
User = {};

ngOnInit() {}


onRegisterSubmit() {
    console.log(this.User)
    let formData = new FormData();

    for (var key in this.User) {
        formData.append(key, this.User[key]);
    }

    let file: any = document.querySelector("#profileImage").files[0]
    formData.append('profileImage', file )


    this.registerservice.registerUser(formData).subscribe((data) => {
        if (data.success) {
            this.router.navigate([''])
        } else {
            console.log(data.msg)
        }
    })
}}

Это услуга

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {environment} from '../../environments/environment';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable({
providedIn: 'root'
})

export class RegisterService {

constructor(private http: Http) { }

registerUser(user) {
    let headers = new Headers();
    return this.http.post(environment.host + "/api/users/register", 
{headers}, user).map(data => data.json());
}
}

и вот внутренний код этой функции

const express = require("express");
const User = require("../models/user");
const multer = require("multer");
const jwt = require("jsonwebtoken");
const config = require("../config/config")
const router = express.Router();
const _ = require("lodash");
const passport = require("passport");

// Registering a user
router.post("/register", upload.single("profileImage"), (req, res) => {
let newUser = new User({
    username: req.body.username,
    password: req.body.password,
    email: req.body.email,
    name: req.body.name,
    bio: req.body.bio,
    profileImage: req.body.path
 })
 User.addUser(newUser, (err) => {
    if (err) return err;
    res.send({
        success: "true",
        msg: "You've singed up successfully"
    })
  })})

и вот наконец HTML:

<form (submit)="onRegisterSubmit()" enctype="multipart/form-data" method="post">
<div class="container">
    <label for="username"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" [(ngModel)]="User.username" name="username" required>

    <label for="username"><b>Name</b></label>
    <input type="text" placeholder="Enter Name" [(ngModel)]="User.name" name="name" required>

    <label for="password"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" [(ngModel)]="User.password" name="password" required>

    <label for="bio"><b>Name</b></label>
    <input type="text" placeholder="Enter Biography" [(ngModel)]="User.bio" name="bio" required>

    <label for="bio"><b>Email</b></label>
    <input type="email" placeholder="Enter Email" [(ngModel)]="User.email" name="email" required>

    <label for="profileImage"><b>Profile Image</b></label>
    <input type="file" placeholder="Upload" id="profileImage" />

    <button type="submit">Register</button>
</div>