2017-04-25 3 views
0

J'envoie une image en utilisant un formulaire et quand il fait le soumettre envoyer la demande sans données. Voici mon code:Angulaire 2 post demande ne pas envoyer des données d'image

component.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> 

component.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'); 
    }); 
} 

REpRésEntants (Service)

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); 
} 

NodeJS

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'); 
     }) 
    }); 

Quand je ne le soumets, si je vérifie ma demande sended il montre quelque chose comme ça {fileData: {}}. Pourquoi envoie-t-il des données nulles?

+0

t-il avec this.file = event.srcElement.files [0]? – Powkachu

+0

Oui, c'est le cas, mais la demande envoie toujours un objet vide – Crisiiii

Répondre