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?
t-il avec this.file = event.srcElement.files [0]? – Powkachu
Oui, c'est le cas, mais la demande envoie toujours un objet vide – Crisiiii