Как отправить изображение из Angular в Node JS, используя экспресс и мультитер?

Question

Я часами ищу в гугле, чтобы найти решение, но в моем проекте ничего не работает.Мне нужен модуль, который может отправлять изображения из Angular и сохранять их в каталоге Node JS.

Я знаю, что что-то не так, потому что req.file всегда неопределен ...

ВотКод моего узла JS:

const express = require('express');
const app = express();
const multer = require('multer');
const bodyParser = require('body-parser');

const upload = multer({
    dest: 'assets/' // this saves your file into a directory called "uploads"
  });

app.use(express.static('assets'));

app.use(bodyParser.json());

var cors = require('cors')
app.use(cors())

  app.route(requestPath).post((req, res) => {
    upload.single('image')
    console.log(req.file);
});

Мой угловой сервис:

  addImage( ... , fd){ 
    return this.http.post(requestPath, {
  file: fd 
})

}

Мой угловой код:

selectedFile = null;

imageSelected(event){
    this.selectedFile = event.target.files[0];
  }

onSubmit(){
    const fd = new FormData();
    fd.append('image', this.selectedFile, this.selectedFile.name);
    this.imageService.addImage( ... , fd).subscribe( _ => {
        this.router.navigate(['../'], { relativeTo: this.route });
      });
    }

Мой HTML-код:

    <form class="form-horizontal" role="form" [formGroup]="addImage" (ngSubmit)="onSubmit()" id="uploadForm" enctype="multipart/form-data">
        <div class="form-group">
          <label class="col-lg-3 control-label">Choisissez la photo</label>
          <input type="file" id="image" name="image" class="form-control" formControlName="photo" (change)="imageSelected($event)" required>
        </div>

Большое спасибо, если кто-нибудь может мне помочь!Я делаю фотогалерею, но это бесполезно, если я не могу загрузить на нее фотографию ...

Answer 1

Попробуйте (в узле) зарегистрировать требование body .file:

  app.route(requestPath).post((req, res) => {
    upload.single('image')
    console.log(req.body.file);

Кроме того, в службе Angular после определения переменной FormData выйдите из файла и файла.Назовите переменные в консоли, чтобы убедиться, что у вас есть данные для отправки в службу.Это скажет вам, если проблема в переднем конце или стороне узла.

const fd = new FormData();

console.log("this.selectedFile",this.selectedFile;
console.log("this.selectedFile.name", this.selectedFile.name);

fd.append('image', this.selectedFile, this.selectedFile.name);