Comment remplacer Angular2 Http pour télécharger des fichiers?

Question

Le code suivant tente d'envoyer un fichier à partir d'une application Angular2. Il finit toujours dans l'API REST de ne pas pouvoir reconnaître le fichier dans la requête qu'il reçoit. Après avoir passé des heures à chercher StackOverflow et d'innombrables autres sources en ligne, je suis arrivé à la conclusion que la version la plus récente du module/service HTTP Angular2 devrait maintenant être capable de gérer les téléchargements de fichiers. . (Le fait qu'il n'était pas capable de le faire dans le passé est tout simplement incroyable!) Voir ceci article ou même this git sample.

Si je dois utiliser une lib externe comme ng2-file-upload, il doit être capable de remplacer Angular2 :: Http avec le moins de modifications possible au code suivant. (À savoir que je ne peux pas changer la forme HTML.)

Component.html

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()" novalidate> 
 
     <label>Votre avatar !</label> 
 
     <input class="form-control" type="file" name="avatar" (change)="imageUpload($event)" > 
 
     

Component.ts

imageUpload(e) { 
 
    let reader = new FileReader(); 
 
    //get the selected file from event 
 
    let file = e.target.files[0]; 
 
    reader.onloadend =() => { 
 
     this.image = reader.result; 
 
    } 
 
    reader.readAsDataURL(file); 
 
    } 
 

 

 
    onSubmit() { 
 
    if (this.image){ 
 
      this.authService.setAvatar(this.image).subscribe(
 
      d => { 
 
       //Do Nothing... Will navigate to this.router.url anyway so... 
 
      }, 
 
      err =>{ 
 
       this.errorMessage = err; 
 
       console.log(err); 
 
      } 
 

 
     ); 
 
     } 
 
    }

authService.ts

setAvatar(image:any){ 
 
    
 
    let form: FormData = new FormData(); 
 
    form.append('avatar', image); 
 
    return this.http.post (Config.REST_URL + 'user/setAvatar?token=' +localStorage.getItem('token'), form, 
 
    {headers: new Headers({'X-Requested-With': 'XMLHttpRequest' })} 
 
    ).catch(this.handleError); 
 
    }

REST_API Php (Laravel)

public function setAvatar(Request $request){ 
 
     if($request->hasFile("avatar")) { // ALWAYS FALSE !!!! 
 
      $avatar = $request->file("avatar"); 
 
      $filename = time() . "." . $avatar->getClientOriginalExtension(); 
 
      Image::make($avatar)->fit(300)->save(public_path("/uploads/avatars/" . $filename)); 
 
      return response()->json(['message' => "Avatar added !"], 200); 
 
     } 
 

 
     return response()->json(['message' => "Error_setAvatar: No file provided !"], 200); 
 
    }

Contenu de la demande Payload (Comme on le voit à partir de Chrome Examiner/réseau)

------WebKitFormBoundary8BxyBbDYFTYpOyDP 
 
Content-Disposition: form-data; name="avatar"

devrait être plus comme ...:

Content-Disposition: form-data; name="avatar"; filename="vlc926.png" 
 
Content-Type: image/png

Answer 1

Turns out Http de Angular2 peuvent maintenant envoyer des fichiers ... Et il est super facile .... Je viens! Je ne peux pas croire qu'il n'y a pas de documentation là-bas montrant cela! Except this one. (Credits to MICHAŁ DYMEL)

Le code HTML

<input #fileInput type="file"/> 
 
    <button (click)="addFile()">Add</button>

Component.ts

@ViewChild("fileInput") fileInput; 

addFile(): void { 
let fi = this.fileInput.nativeElement; 
if (fi.files && fi.files[0]) { 
    let fileToUpload = fi.files[0]; 
    this.uploadService 
     .upload(fileToUpload) 
     .subscribe(res => { 
      console.log(res); 
     }); 
    } 
} 

Le service.ts

upload(fileToUpload: any) { 
    let input = new FormData(); 
    input.append("file", fileToUpload); 

    return this.http.post("/api/uploadFile", input); 
}