Как правильно закачать файл используя angular и multer?

Question

Проблема:

Я разработал загрузку файла с использованием angular и multer с express js. Но когда я пытаюсь загрузить файл, он продолжает выдавать эту ошибку.

onSelectImage(event) {
    const file: File = event.target.files[0];
    if (file) {
      if (file.size / 1048576 < 2) {
        if (file.type === "image/jpeg" || file.type === "image/png") {
          this.fileUploadService.onLoad(file).subscribe(data=>{
            console.log("upload +++++", data);
          })
          this.previewSelectedImage(file);
        } else {
          this.openSnackBar("Image type must be jpeg or png", "Error");
        }
      } else {
        this.openSnackBar(
          "Image size not match. Image size must be smaller than 2MB",
          "Error"
        );
      }
    }
  }

Это код моего служебного файла.

import { Injectable } from "@angular/core";
import {
  HttpClient,
  HttpHeaders,
  HttpEvent,
  HttpErrorResponse,
  HttpEventType,
} from "@angular/common/http";
import { map } from "rxjs/operators";
import {
  BASE_URL_ADMIN,
  BASE_URL_PATIENT,
} from "../../../app-main/config/enum.config";

@Injectable({
  providedIn: "root",
})
export class FileUploadServiceService {
  ref: any;

  constructor(private httpClient: HttpClient) {}

  onLoad(fileToUpload: File) {
    const path = BASE_URL_PATIENT + "user/patPic";
    let headers = new HttpHeaders();
    const formData = new FormData();
    formData.append("patPic", fileToUpload, fileToUpload.name);
    console.log(formData);
    console.log(fileToUpload.name);
    return this.httpClient.post(path, formData, {
      headers,
      reportProgress: true,
      observe: "events",
    });
  }
}

Вот как я написал код в контроллере express. js.

const multer = require("multer");
const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null,  "./uploads/");
  },
  filename: function(req, file, cb) {
    cb(null, new Date().toISOString().replace(/:/g,'-') + file.originalname);
  }
});

const fileFilter = (req, file, cb) => {
  //reject file
  if (file.mimetype === "image/jpeg" || file.mimetype === "image/png" || file.mimetype === "application/pdf") {
    cb(null, true);
  } else {
    cb(null, false);
  }
};
const upload = multer({
  storage: storage,
  limits: {
    fileSize: 1024 * 1024 //1Mb
  },
  fileFilter: fileFilter
});


router.post("/patPic", upload.single("patPic"), (req, res, next) => {
  console.log(req.file);
  res.status(200).json({ fileSrc: req.file.path });
});

В файле index. js Я настроил политику перекрестного происхождения.

app.use(function(req, res, next) {
    var allowedOrigins = [
      "http://localhost:4200"
    ];
    var origin = req.headers.origin;
    console.log(origin)
    console.log(allowedOrigins.indexOf(origin) > -1)
    // Website you wish to allow to
    if (allowedOrigins.indexOf(origin) > -1) {
      res.setHeader("Access-Control-Allow-Origin", origin);
    }

    // res.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");

    // Request methods you wish to allow
    res.setHeader(
      "Access-Control-Allow-Methods",
      "GET, POST, OPTIONS, PUT, PATCH, DELETE"
    );

    // Request headers you wish to allow
    res.setHeader(
      "Access-Control-Allow-Headers",
      "X-Requested-With,content-type,Authorization"
    );

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader("Access-Control-Allow-Credentials", true);

    // Pass to next layer of middleware
    next();
  });

И в журнале сервера при загрузке файла он показывает этот журнал на сервере.

SyntaxError: Неожиданный токен - в JSON в позиции 0 в JSON .parse () в createStrictSyntaxError (/home/hrm/Generalpublicapp/node_modules/body-parser/lib/types/json.js:158:10) в parse (/ home / hrm / Generalpublicapp / node_modules / body- parser / lib / types / json. js: 83: 15) в /home/hrm/Generalpublicapp/node_modules/body-parser/lib/read.js:121:18 в invokeCallback (/ home / hrm /Generalpublicapp/node_modules/raw-body/index.js:224:16) при завершении (/home/hrm/Generalpublicapp/node_modules/raw-body/index.js:213:7) на IncomingMessage.onEnd ( / home / hrm / Generalpublic app / node_modules / raw-body / index. js: 273: 7) в IncomingMessage.emit (events. js: 322: 22) в endReadableNT (_stream_readable. js: 1187: 12) в processTicksAndRejection (internal /process/task_queues.js:84:21)

Может ли кто-нибудь помочь мне решить эту проблему? Я много пытался найти решение этой проблемы. Но я не смог этого сделать. Большое спасибо.