Estoy enviando una imagen usando un formulario y cuando lo hace, envía la solicitud sin datos. Aquí mi código:

componente.html

 <form [formGroup]="logoImageForm" *ngIf="representativeSelected != null" (ngSubmit)="onSubmit(logoImageForm)"> <md-grid-list cols="6" rowHeight="50"> <md-grid-tile> <input type="file" id="logo_image" formControlName="logo_image" name="logo_image" ngModel (change)="onChange($event)"> </md-grid-tile> </md-grid-list> <md-card-actions> <button md-raised-button color="primary" type="submit">Save</button> </md-card-actions> </form>

componente.ts

 onChange(event){ this.file = event.target.files[0]; } onSubmit(logoImage){ this.representativeS.uploadLogoImage(this.file) .subscribe( data => { swal('', 'Image updated!', 'success'); }, error => { swal('Error', '<p>' + error.message + '</p>', 'success'); }); }

representantes (servicio)

 uploadLogoImage(file){ let url = this.routesS.getApiRoute('logoImage'); console.log(file); return this.http.post(url, JSON.stringify({fileData: file}),{ withCredentials: true, headers: this.headersImage }) .map((response: Response) => { return response.json(); }) .catch(this.handleError); }

NodoJS

 var storage = multer.diskStorage({ destination: function (req, file, callback) { callback(null, 'path/test'); }, filename: function (req, file, callback) { callback(null, 'logo-image') } }); var upload = multer({ storage: storage }).single('logo-image'); router.route('/representatives/:id/logoImage') .post((req, res, next) => { upload(req, res, function (err) { if (err) { console.log('Error Occured'); return; } res.end('Your File Uploaded'); }) });

Cuando hago el envío, si reviso mi solicitud enviada, muestra algo así {fileData: {}} . ¿Por qué está enviando datos vacíos?