角度4と春のフレームワークを使用したファイルアップロード

Question

角度4と春のフレームワークでファイルアップロードの作業をしようとしていますが、次のコードを実装しましたが動作しません。

角度component.ts

upload() { 
    let inputEl: HTMLInputElement = this.inputEl.nativeElement; 
    let fileCount: number = inputEl.files.length; 
    let formData = new FormData(); 
    if (fileCount > 0) { 
     for (let i = 0; i < fileCount; i++) { 
      formData.append('file[]', inputEl.files.item(i)); 

} 

     console.log(fileCount);// print count of files correctly 

    this.http.post("/filestorage/api/upload", formData) 
        .map(res => res.json()) 
        .subscribe(); 
    } 
} 

春コントローラ

@PostMapping("/upload") 
@Timed 
public void upload(@RequestParam(value="file", required=false) 
     MultipartFile file) throws IOException { 

     System.out.println(file); //get null value 
    } 

Answer 1

私は今、それが正常に動作し、MultipartHttpServletRequestにMultipartFileを変更し、必要な変更を行いました。あなたのアップロード機能で

@PostMapping("/upload") 
@Time 
public void upload(MultipartHttpServletRequest request) throws IOException { 

    Iterator<String> itr = request.getFileNames(); 
    MultipartFile multipart = request.getFile(itr.next()); 
    java.io.File convFile = new java.io.File(multipart.getOriginalFilename()); 
     convFile.createNewFile(); 
     FileOutputStream fos = new FileOutputStream(convFile); 
     fos.write(multipart.getBytes()); 
     fos.close(); 
} 

Answer 2

、あなたの要求にヘッダを追加してみてください、例：

upload() { 
    let inputEl: HTMLInputElement = this.inputEl.nativeElement; 
    let fileCount: number = inputEl.files.length; 
    let formData = new FormData(); 
    if (fileCount > 0) { 
     for (let i = 0; i < fileCount; i++) { 
      formData.append('file[]', inputEl.files.item(i)); 
     } 
     console.log(fileCount);// print count of files correctly 

     let headers = new Headers();// import { Headers,BaseRequestOptions } from '@angular/http'; 
     headers.append('enctype','multipart/form-data'); 
     headers.append('Accept', 'application/json'); 
     let options = new BaseRequestOptions(); 
     options.headers = headers; 

     this.http.post("/filestorage/api/upload", formData , options) 
        .map(res => res.json()) 
        .subscribe(); 
    } 
} 

角度4.