Comment télécharger des fichiers en utilisant Angular 2+, Express et nodeJs

Question

En essayant de télécharger une image en utilisant Angular 4, node et Express avec la bibliothèque Multer.

voici mon route.js:

const storage = multer.diskStorage({ 
destination: function(req, file, cb) { 
    cb(null, 'uploads') 
}, 
filename: function(req, file, cb) { 
    cb(null, file.fieldname + '-' + Date.now() + '.jpg') 
    } 
}); 

const upload = multer({ storage: storage }).single('avatar'); 


router.post('/upload_avatar', function(req, res) { 
upload(req, res, function(err) { 
    if (err) { 
     // An error occurred when uploading 
     throw err; 
    } 
    res.json({ 
     sucess: true, 
     message: 'Image was uploaded successfully' 
    }); 
    // Everything went fine 
    }) 
}); 

si je l'utilise Postman il fonctionne et ajoute l'image dans le répertoire des téléchargements dans mon projet.

voici mon UserService.js

import { Injectable } from '@angular/core'; 
import {Http, Headers, RequestOptions} from '@angular/http'; 
import 'rxjs/add/operator/map'; 
@Injectable() 
export class UserService { 
    user: any; 
    filesToUpload: Array<File> = []; 

    constructor(private http: Http) { } 

    uploadAvatar(event){ 
    let fileList: FileList = event.target.files; 
    if(fileList.length > 0) { 
    let file: File = fileList[0]; 
    let formData:FormData = new FormData(); 
    formData.append('uploadFile', file, file.name); 
    let headers = new Headers(); 
    /** No need to include Content-Type in Angular 4 */ 
    // headers.append('Content-Type', 'multipart/form-data'); 
    // headers.append('Accept', 'application/json'); 

    this.http.post('http://localhost:3000/api/upload_avatar', formData, 
    {headers: headers}) 
     .map(res => res.json()) 
     .catch(function(err){ 
      throw err; 
     }) 
     .subscribe(
      data => console.log('success'), 
      error => console.log(error) 
     ) 
    } 
} 

et mes profile.component.ts utilise cette fonction:

fileChangeEvent(event) { 
this.userService.uploadAvatar(event); 
} 

enfin mon HTML ressemble à ceci:

<div class="col-md-4"> 
      <img [src]="userImg" class="img-thumbnail" alt=""> 
      <input type="file" (change)="fileChangeEvent($event)" 
placeholder="Upload file..." /> 
      <!-- <button type="button" (click)="upload()">Upload</button> -- 
> 
     </div> 

quand J'utilise le facteur, cela fonctionne, donc je suppose que le problème a à voir avec le code angulaire. aussi je pense qu'il doit être avec des en-têtes ou une demande de corps. est l'erreur ici que je reçois du serveur de nœud:

 C:\Users\admin\Desktop\project\contactlist\routes\route.js:33 
     throw err; 
     ^
     Error: Unexpected field 
     at makeError 

node_modules\multer\lib\make- 
    error.js:12:13) 
    at wrappedFileFilter 
node_modules\multer\index.js:40:19) 
    at Busboy.<anonymous> \node_modules\multer\lib\make-middleware.js:114:7) 
    at emitMany (events.js:127:13) 
at Busboy.emit (events.js:201:7) 
    at Busboy.emit node_modules\busboy\lib\main.js:38:33) 
at PartStream.<anonymous> ( 
node_modules\busboy\lib\types\multipart.js:213:13) 
at emitOne (events.js:96:13) 
at PartStream.emit (events.js:188:7) 
at HeaderParser.<anonymous> (node_modules\dicer\lib\Dicer.js:51:16) 
at emitOne (events.js:96:13) 
at HeaderParser.emit (events.js:188:7) 
at HeaderParser._finish (node_modules\dicer\lib\HeaderParser.js:68:8) 
at SBMH.<anonymous> (node_modules\dicer\lib\HeaderParser.js:40:12) 
at emitMany (events.js:127:13) 
at SBMH.emit (events.js:201:7) 

Answer 1

vient de changer cette ligne de:

formData.append('uploadFile', file, file.name); 

t o:

formData.append('avatar', file, file.name); 

maintenant ça marche!

Answer 2

J'utilise le code suivant:

fileChange(event) { 
    const fileList: FileList = event.target.files; 
    if (fileList.length > 0) { 
     const file: File = fileList[0]; 
     const formData: FormData = new FormData(); 
     formData.append('file', file, file.name); 
     const headers = new Headers(); 
     headers.append('Content-Type', 'multipart/form-data'); 
     headers.append('Accept', 'application/json'); 
     const body = JSON.stringify({ headers: headers }); 
     this.http.post('https://bla.com', formData, body) 
      .map(res => res.json()) 
      .catch(error => Observable.throw(error)) 
      .subscribe(data => { 
      const Response = data['_status']; 
      if (Response) { 
       this.uploadFile.push(data); 
      } else { 
       this.showFileError = data['_error']; 
      } 
      } 
     ); 
    } 
    } 

HTML Template:

<input class="file-hide" type="file" (change)="fileChange($event)">