如何取代Angular2 Http上传文件？

以下代码尝试从Angular2应用程序发送文件。它总是在REST API中最终无法识别它正在接收的请求中的文件。（即使内容接缝在那里！）如何取代Angular2 Http上传文件？

花费数小时搜索StackOverflow和无数其他在线资源后，我得出结论，最新版本的Angular2 Http模块/服务现在应该能够处理文件上传。（事实上，它在过去是不可能的，这真是太神奇了！）看到这个article甚至this git sample。

如果我要使用像ng2-file-upload这样的外部库，它需要能够用尽可能少的修改代替Angular2 :: Http到以下代码。（即我不能改变的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); 
 
    }

内容（如从铬看出检查/网络）

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

应该更像...：

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

来源

2017-04-18 Tuthmosis

_“请参阅这篇文章”_该文章显示了与您在答案中链接到的解决方案完全相同的解决方案。 – zeroflagL

没有链接...“看到这篇文章”！ – Tuthmosis

原来Angular2的HTTP现在可以发送文件...它的超级容易....我只是！不能相信有没有文件显示这个！ Except this one. (Credits to MICHAŁ DYMEL)

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

服务。ts

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

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

来源

2017-04-18 20:25:20 Tuthmosis

如何取代Angular2 Http上传文件？

回答

相关问题