Angular 2とSpringのファイルアップロード

Question

AngularクライアントとSpringサーバーを使用してファイルを簡単にアップロードする方法はありますか？外部ライブラリなしでAngularを使用すると、最も簡単な解決策を見つける前に、さまざまな質問/回答を検索する必要がありました。 解決策の下で、StackOverflowの質問/回答スタイルを使用して、StackOverflowで見つかったいくつかの回答をまとめることができました。

Answer 1

私が見つけた解決策。私がコードを取った答えをもう一度見つけるとすぐに、私はそのコードを参考にします。

File Upload In Angular 2?

ファイルupload.component.html

<input type="file" 
      (change)="fileChange($event)" 
      placeholder="Upload file" 
      accept=".pdf,.doc,.docx"> 

ファイルupload.component.ts

import { Component } from '@angular/core'; 
    import { RequestOptions, Headers, Http } from '@angular/http'; 
    import { Observable } from 'rxjs'; 

    @Component({ 
     selector: 'file-upload', 
     templateUrl: './file-upload.component.html' 
    }) 
    export class FileUploadComponent { 

     apiEndPoint = "http://localhost:8080/mySpringApp/upload"; 

     constructor(private http: Http) { 
     } 

     fileChange(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(); 
      headers.append('Accept', 'application/json'); 
      let options = new RequestOptions({ headers: headers }); 
      this.http.post(`${this.apiEndPoint}`, formData, options) 
      .map(res => res.json()) 
      .catch(error => Observable.throw(error)) 
      .subscribe(
      data => console.log('success'), 
      error => console.log(error) 
      ) 
     } 
     } 
    } 

スプリングコントローラ：

package unisvid.sessionManager.server.controller; 

    import java.io.BufferedOutputStream; 
    import java.io.File; 
    import java.io.FileOutputStream; 
    import java.io.IOException; 
    import java.util.Iterator; 

    import org.springframework.web.bind.annotation.CrossOrigin; 
    import org.springframework.web.bind.annotation.RequestMapping; 
    import org.springframework.web.bind.annotation.RequestMethod; 
    import org.springframework.web.bind.annotation.RestController; 
    import org.springframework.web.multipart.MultipartFile; 
    import org.springframework.web.multipart.MultipartHttpServletRequest; 

    @CrossOrigin(origins = "*") 
    @RestController 
    public class FileUploadController { 

     @RequestMapping(value = "/upload", method = RequestMethod.POST) 
     public void UploadFile(MultipartHttpServletRequest request) throws IOException { 

     Iterator<String> itr = request.getFileNames(); 
     MultipartFile file = request.getFile(itr.next()); 
     String fileName = file.getOriginalFilename(); 
     File dir = new File("/Users/luigi/Documents/tmp/"); 
     if (dir.isDirectory()) { 
      File serverFile = new File(dir, fileName); 
      BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile)); 
      stream.write(file.getBytes()); 
      stream.close(); 
     } 
     } 
    } 

Answer 2

角度2+ prファイルをアップロードするのに適しています。

空のContent-Typeを残すために非常に重要です：

は、ここに私のソリューションです。 'Content-Type'を 'multipart/form-data'に設定すると、アップロードは機能しません！

upload.component.html

<input type="file" (change)="fileChange($event)" name="file" /> 

upload.component.ts

export class UploadComponent implements OnInit { 
    constructor(public http: Http) {} 

    fileChange(event): void { 
     const fileList: FileList = event.target.files; 
     if (fileList.length > 0) { 
      const file = fileList[0]; 

      const formData = new FormData(); 
      formData.append('file', file, file.name); 

      const headers = new Headers(); 
      // It is very important to leave the Content-Type empty 
      // do not use headers.append('Content-Type', 'multipart/form-data'); 
      headers.append('Authorization', 'Bearer ' + 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9....'); 
      const options = new RequestOptions({headers: headers}); 

      this.http.post('https://api.mysite.com/uploadfile', formData, options) 
       .map(res => res.json()) 
       .catch(error => Observable.throw(error)) 
       .subscribe(
        data => console.log('success'), 
        error => console.log(error) 
       ); 
     } 
    } 
}