я пытаюсь загрузить изображение в приложение стека MEAN, но когда я нажимаю кнопку «Отправить», страница переходит к постоянной загрузке

Question

вот мой код. Экран продолжает загружаться всякий раз, когда я нажимаю кнопку отправки формы. Однако ошибка не отображается. Кто-то, пожалуйста, помогите мне с этим. Спасибо за ответ. Я использую multer at backend и mime type validator для фильтрации магов только изображений jpeg, jpg и png. внешний интерфейс:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from "@angular/forms";
import{AdminteacherService} from '../Services/adminteacher.service';
import { MatSpinner } from '@angular/material';
import { HttpClient } from "@angular/common/http";
import { mimeType } from "./mime-type.validator";

import { ActivatedRoute, ParamMap } from "@angular/router";
import {TeacherModel} from '../../../backend/model/teacher';

@Component({
  selector: 'app-adminteacher',
  templateUrl: './adminteacher.component.html',
  styleUrls: ['./adminteacher.component.css']
})
export class AdminteacherComponent implements OnInit {

  enteredName = "";
  enteredSSN = "";
  enteredBranch = "";
  enteredPassword = "";

  post: TeacherModel;
  isLoading = false;
  form: FormGroup;
  imagePreview: string;
  private mode = "create";
  private postId: string;

  constructor(public postsService: AdminteacherService,
    public route: ActivatedRoute,
    private http:HttpClient) { }

    ngOnInit() {
      this.form = new FormGroup({
        name: new FormControl(null, {
          validators: [Validators.required, Validators.minLength(3)]
        }),
        ssn: new FormControl(null, { validators: [Validators.required] }),
        branch: new FormControl(null, { validators: [Validators.required] }),
        password: new FormControl(null, { validators: [Validators.required] }),
        image: new FormControl(null, {
          validators: [Validators.required],
          asyncValidators: [mimeType]
        })
      });

    }

      onImagePicked(event:Event) {
        const file = (event.target as HTMLInputElement).files[0];
        this.form.patchValue({ image: file });
        this.form.get("image").updateValueAndValidity();
        const reader = new FileReader();
        reader.onload = () => {
          this.imagePreview = reader.result as string;
        };
        reader.readAsDataURL(file);
      }






  onSavePost() {
    if (this.form.invalid) {
      return;
    }
    this.isLoading = true;
    if (this.mode === "create") {
      this.postsService.addPost(
        this.form.value.name,
        this.form.value.image,
        this.form.value.ssn,
        this.form.value.branch,
        this.form.value.password

      );
    }
postForm.value.ssn,postForm.value.password,postForm.value.branch,postForm.value.image);
      this.form.reset();
  }
}

ФАЙЛ ОБСЛУЖИВАНИЯ:

import { HttpClient } from "@angular/common/http";
import { Subject } from "rxjs";
import { map } from "rxjs/operators";
import { Router } from "@angular/router";
import {TeacherModel} from '../../../backend/model/teacher';

@Injectable({
  providedIn: 'root'
})
export class AdminteacherService {

  constructor(private http:HttpClient) { }

    postData:TeacherModel;

  addPost(name: string,image:File,ssn: string,branch:string,password:string) {
    const postData=new FormData();
    postData.append("name",name);
    postData.append("image",image,name);
    postData.append("ssn",ssn);
    postData.append("branch",branch);
    postData.append("password",password);

    console.log("I am here");
    this.http
      .post<{message: string; postId: string}>(
        "http://localhost:3000/admin/addteacher",
        postData
      )
      console.log("I am not here");

}
}

НАЗАД:

const express=require("express");
const multer=require("multer");

const Post=require("../model/teacher");
const router=express.Router();
const mongoose = require('mongoose');


mongoose.connect('mongodb://localhost:27017/MyMINIPROJECT', { useNewUrlParser: true , useUnifiedTopology: true});


const MIME_TYPE_MAP={
    'image/png' : 'png',
    'image/jpeg' : 'jpg',
    'image/jpg' : 'jpg'
};





const storage = multer.diskStorage({
    destination: (req, file, cb) => {
      const isValid = MIME_TYPE_MAP[file.mimetype];
      let error = new Error("Invalid mime type");
      if (isValid) {
        error = null;
      }

    cb(error, "./images");
    },
    filename: (req, file, cb) => {
      const name = file.originalname
        .toLowerCase()
        .split(" ")
        .join("-");
      const ext = MIME_TYPE_MAP[file.mimetype];
      cb(null, name + "-" + Date.now() + "." + ext);
    }
  });




router.post('/admin/addteacher', multer({ storage: storage }).single("image"),
(req, res, next)=>{
    const url = req.protocol + "://" + req.get("host");

    console.log("reached backend");
    const post=new Post({
        name:req.body.name,
        img_link: url + "/images/" + req.file.filename,
        ssn:req.body.ssn,
        branch:req.body.branch,
        password:req.body.password

    }); 


    post.save().then(createdPost => {
        res.status(201).json({
          message: "Post added successfully",
          post: {
            ...createdPost,
            id: createdPost._id
          }
        });
      });

});


module.exports = router;