Fehler beim Datei-Upload von Angular 2 mit Spring boot Rest API

Question

Ich versuche, ein Profilbild von Angular2 hochzuladen und Backend ist in Spring Boot Rest APIs, die mehrteilige Daten unterstützt. Ich scheiterte von 400.

Der Code mit Fehler Anfrage auf Back-End und die Chrom Rückkehr zu empfangen ist unten angegeben:

Frontend:

HTML:

<input class="file" type="file" (change)="uploadProfileImgOnChange($event)"> 

TS:

uploadProfileImgOnChange(event: any) { 
     let fileList: FileList = event.target.files; 
     if (fileList.length > 0) { 
      this.file = fileList[0]; 

      this.requestsService.postRequestMultipartFormData(
       '/admin/uploadProfileImg/' + this.id 
       , this.file) 
       .subscribe(
        (response: Response) => { 
         if (response['responseCode'] === 'ADM_SUC_08') { 
          console.log(); 
         } 
        }, 
        (error: any) => { 
         this.apUtilServer.tokenExpired(error.json()['error']); 
         //console.log(error.json()) 
        } 
       ); 
} 
} 

postRequestMultipartFormData(url: any, data: any) { 
     data = this.removeUndefined(data); 
     var formData = new FormData(); 
     const headers = new Headers(); 
     formData.append('file', data, data.name); 
     if (this.getToken()) { 
      headers.append('Authorization', 'Bearer ' + this.getToken()); 
     } 
     headers.append('Accept', 'application/json'); 
     console.log(headers); 
     return this.http.post('http://127.0.0.1:8080/AdminPortal/admin/' + url, formData, {headers: headers}) 
      .map((response: Response) => { 
       return response.json(); 
      }) 
    } 

Backend:

@RequestMapping(value = "/uploadProfileImg/{id}", method = RequestMethod.POST) 
    public ResponseEntity<?> uploadProfileImage(HttpServletRequest request, 
               @PathVariable("id") long id, 
               @RequestParam("file") MultipartFile file) { 
     logger.info("Update Admin API called {" + id); 

Vielen Dank im Voraus.

Kein Problem in URL, also ignorieren Sie bitte, um Childesh Kommentare zu tun.

Answer 1

Ich hatte Probleme mit Angular4, um Dateien zum Spring Boot hochzuladen. Ich habe hier einen Beitrag gefunden, der mein Problem gelöst hat.

Hier ist der Original-Beitrag: https://stackoverflow.com/a/35669598/1474815

Hier ist der Code, den ich verwenden, um die Datei zu schreiben. Es wirkt wie ein Zauber.

uploadFile(file:File):Promise<MyEntity> { 
    return new Promise((resolve, reject) => { 

     let xhr:XMLHttpRequest = new XMLHttpRequest(); 
     xhr.onreadystatechange =() => { 
      if (xhr.readyState === 4) { 
       if (xhr.status === 200) { 
        resolve(<MyEntity>JSON.parse(xhr.response)); 
       } else { 
        reject(xhr.response); 
       } 
      } 
     }; 

     xhr.open('POST', this.getServiceUrl(), true); 

     let formData = new FormData(); 
     formData.append("file", file, file.name); 
     xhr.send(formData); 
    }); 
}