角度2 PrimeNG +春のブートファイルアップロードエラー400

Question

私は春のブートサーバー側のアプリケーションにprimeNGでファイルをアップロードしようとしています..しかし、私はエラー400を取得しています。..

ここでは私のコードです： app.html

<p-fileUpload name="myfile[]" url="http://localhost:8080/upload" (onUpload)="onUpload($event)" > 
     <template pTemplate type="content"> 
      <ul *ngIf="uploadedFiles.length"> 
       <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li> 
      </ul> 
     </template>   
    </p-fileUpload> 

app.ts

msgs: Message[]; 
    uploadedFiles: any[] = []; 

    onUpload(event) { 
     for(let file of event.files) { 
      this.uploadedFiles.push(file); 
     } 

     this.msgs = []; 
     this.msgs.push({severity: 'info', summary: 'File Uploaded', detail: ''}); 
    } 

春のブートコントローラー：

@RequestMapping(value="/upload", 
      method=RequestMethod.POST, 
      consumes = MediaType.MULTIPART_FORM_DATA_VALUE, 
      produces = MediaType.APPLICATION_JSON_VALUE) 
    public @ResponseStatus(HttpStatus.CREATED) ResponseEntity processUpload(@RequestParam("myfile") MultipartFile file) throws IOException { 

      return ResponseEntity.ok("Fichier En cours de Traitement.."); 
    } 

CORSコンフィグ

 HttpServletResponse response = (HttpServletResponse) sRes; 
     HttpServletRequest request = (HttpServletRequest) sReq; 
     response.setHeader("Access-Control-Allow-Origin", "*"); 
     response.setHeader("Origin", "*"); 
     response.setHeader("Access-Control-Allow-Credentials", "true"); 
     response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT"); 
     response.setHeader("Access-Control-Max-Age", "3600"); 
     response.setHeader("Access-Control-Allow-Headers", "Origin, Authorization, Content-Type, Accept, X-Requested-With, Cache-Control, Accept"); 
     response.setHeader("Access-Control-Expose-Headers", "X-Requested-With, Authorization"); 

     if("OPTIONS".equalsIgnoreCase(request.getMethod())) { 
      response.setStatus(HttpServletResponse.SC_OK); 
     } else { 
      fc.doFilter(sReq, response); 
     } 
    } 

Answer 1

あなたのPrimeNGのアップロードにname="myfile"を使用する必要があります - これはあなたの春のコントローラが期待する名前です。

app.html：

<p-fileUpload name="myfile" url="http://localhost:8080/upload" 
    (onUpload)="onUpload($event)" > 
      <template pTemplate type="content"> 
       <ul *ngIf="uploadedFiles.length"> 
        <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li> 
       </ul> 
      </template>   
     </p-fileUpload>