[SPRING] 각도 5를 통해 파일 객체를 Spring Rest 컨트롤러로 보내기

각도 5를 통해 파일 객체를 Spring Rest 컨트롤러로 보내기

클라이언트 측에 파일을 업로드하고 HTTP Post 요청을 Spring Rest Controller에 보내려고합니다. 그러나 Rest 컨트롤러에서 파일 객체를 받으면 'null'로 볼 수 있습니다. HTML 코드 :

<input type="file" id="myFile" (change) = "onFileChange($event)" #fileInput>

해당 .ts 파일 :

onFileChange($event) : void {
    let file:File = $event.target.files[0];
    let myReader: FileReader = new FileReader();       
    myReader.onloadend = function(e) {      
    }
    myReader.readAsText(file);
    const req = this.http.post('/abc',myReader.result, {
        headers: new HttpHeaders().set('content-type','application/pdf')
    });
    req.subscribe(
        (data) => {
            console.log(data);
        },
        (err: HttpErrorResponse) => {
            if(err.error instanceof Error) {
                //client side error
                console.log('An error occured: ',err.error.message);
            } else {
                console.log('Backend returned code', err.status, 'body was ',err.error);
            }
        }
    )
}

내 스프링 레스트 컨트롤러 :

@RequestMapping(value="/abc", method = RequestMethod.POST, consumes = "application/pdf") 
public ResponseEntity<String> uploadFile(@RequestBody MultipartFile file) {
    System.out.println("Inside Controller");
    return new ResponseEntity<>("true", HttpStatus.CREATED);
}

누구든지 여기에서 문제를 찾는 데 도움을 줄 수 있습니까?

해결법

1. ==============================

   1.아래 코드를보십시오

   아래 코드를보십시오

   HTML 템플릿

   <input type="file" id="myFile" (change)="onFileChange(fileInput.files)" #fileInput>
   

   TypeScript

   import { Headers, RequestOptions } from '@angular/http'; // Import header and requestOptions
   
   //On File Select
   onFileChange(files: any) {
   
       let file: File = files[0];
   
       let headers = new Headers();
       let options = new RequestOptions({ headers: headers }); // Create header
   
       let formData = new FormData();
       formData.append('file', file); // Append file to formdata
   
       const req = this.http.post('/abc', formData, options);
   
       req.subscribe( (data) => {
   
           console.log(data); // Sucess response
       }, (err: HttpErrorResponse) => {
   
           // Erro response
           if(err.error instanceof Error) {
             //client side error
             console.log('An error occured: ',err.error.message);
           }
           else {
             console.log('Backend returned code', err.status, 'body was ',err.error);
           }
       })
   }
   

   스프링 컨트롤러

   @RequestMapping(value="/abc", method = RequestMethod.POST) 
   public ResponseGenerator uploadFile(@RequestParam MultipartFile file) {
   
       ResponseGenerator responseGenerator = new ResponseGenerator();
   
       try {
   
           if (file != null) {
               System.out.println(file.getOriginalFilename());
           }
           return responseGenerator;
       } catch (Exception e) {
           logger.error("Error while updating user : ", e);
           return responseGenerator;
       }
   }
   

   하나의 서비스를 만들고 해당 서비스에 http 메소드 코드를 넣는 것이 더 좋습니다. 이 링크 참조 입력 유형 = 파일 및 스프링 부트가있는 Angular 2 템플릿 양식

2. ==============================

   2.가장 쉬운 일은 (나에 따르면) FormData 객체를 사용하는 것입니다.

   가장 쉬운 일은 (나에 따르면) FormData 객체를 사용하는 것입니다.

   방법은 다음과 같습니다.

   @viewChild() fileInput: ElementRef;
   
   onFileChange(event) {
     const files = this.fileInput.nativeElement.files as FileList;
     const file = files.item(0);
   
     const formData = new FormData();
     formData.append('pdf', file, file.name);
     this.http.post('abc', formData, {
       headers: new HttpHeaders().set('content-type','application/pdf')
     }).subscribe(
       data => console.log(data),
       err => console.log(err)
     );
   }
   

   이것을 시도하고 Spring 측에서 무엇을 보게되는지 알려주십시오.

from https://stackoverflow.com/questions/48279484/sending-file-object-to-spring-rest-controller-through-angular-5 by cc-by-sa and MIT license