Как исправить неизвестную ошибку (пустой файл FormData) при загрузке файла изображения

Question

Если кто-нибудь может помочь мне исправить следующий код, который отправляет пустую 'FormData object to http / post`, я был бы очень благодарен:

Я смотрел онлайн несколько дней, но ни одно из предполагаемых исправлений не сработало.

app.component.html

<input type="file" (change)="onSelectFile($event)" >
<button (click)="uploadFiles()">Upload</button>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  selectedFile: File; 

  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

  onSelectFile(event) {
    this.selectedFile = <File>event.target.files[0];
    console.log("File name: " + this.selectedFile.name);    
  }

  uploadFiles() {
    let fd = new FormData();

    fd.append('image', this.selectedFile, this.selectedFile.name);
    console.log("Uploading: " + JSON.stringify(this.selectedFile.name));
    try {
        this.http.post("http://localhost:3000/selection/test-photo",fd)
        .subscribe(
          (res) => {
            console.log("Successful response: " + res)},
          (err) => {
            console.log("Subscribe error: " + JSON.stringify(err))} 
      );
    }
    catch(e) {
      console.log("Caught error: " + e);
    }
  }
}

Что касается внутреннего маршрута selection_controller.js в Express, все, что я сейчас делаю, - это регистрация запроса http.post:

exports.selection_test_photo = [
    (req,res,next) => {
        console.log("Posting . . . ");
        console.log("Photos: " + util.inspect(req.body));
        res.json(req.body);
    }
];

Вот скриншот клиента после его запуска:

И ведение журнала на стороне сервера:

Answer 1

Вот решение. Главным было то, что мне нужно было использовать multer на бэк-энде, согласно предложению @Shashank Vivek:

Передняя часть (угловая):

uploadFiles() {
    let fd = new FormData();
    fd.append('image', this.selectedFile);
    fd.append('timeStamp', Date.now().toString());
    try {
        this.http.post("http://localhost:3000/selection/test-photo",fd)
        // this.http.post("http://localhost:3000/selection/test-photo",this.selectedFile)
        .subscribe(
          (res) => {
            console.log("Successful result: " + JSON.stringify(res))},
          (err) => {
            console.log("Subscribe error: " + JSON.stringify(err))} 
      );
    }
    catch(e) {
      console.log("Caught error: " + e);
    }
  }

Модель данных Backend (Express):

var PhotoSchema = new Schema (
    {
        timeStamp: {type: Object},
        photo: {data: Buffer, contentType: String}
    }
)

app.js

var multer = require('multer');

app.use(multer({ dest: './uploads/',
    rename: function (fieldname, filename) {
      return filename;
    },
  }
).single('image'));

функция обратного вызова маршрута загрузки фото:

var fs= require('fs');

exports.selection_test_photo = [
    (req,res,next) => {
        const photo = new Photo();
        photo.photo.data = fs.readFileSync(req.file.path);
        photo.photo.contentType = 'image/png';
        photo.timeStamp = {"value": req.body.timeStamp};
        photo.save(function(err){
            if (err) {return next(err)};
            res.json({"foo": "bar"});
        });        
    },
];