将图像从Angular 7上传到Spring-boot

Question

I am trying to make Image transfer from my Angular application to Spring boot but i seem to not be able to make it work. When I am sending the POST request from angular with the file, spring boot doesn't seem to react at all,so I tested it with PostMan and I am getting the below error:

 "timestamp": "2019-05-05T06:45:26.907+0000",
    "status": 500,
    "error": "Internal Server Error",
    "message": "No primary or default constructor found for class java.io.File",
    "path": "/upload"

and in Spring Boot:

ERROR 18100 --- [nio-8080-exec-3] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is java.lang.IllegalStateException: No primary or default constructor found for class java.io.File] with root cause

as well as Character decoding failed.

In the Spring output it seems to have guessed right the file type(image jpeg) and it's name.

Here is Spring boot receiver:

@RequestMapping(method = RequestMethod.POST,value ="/upload")
     public void postImage(File file) throws IOException {
     System.out.println("received");
}

Later on I am planning on writing down the image in folder but for now I just want to get it.

Below is Angular part

<form>
    <div>Title:  <input type="text" id="input" [(ngModel)]="img.name" 
[ngModelOptions]="{standalone: true}"> 
      <br>
      <input type="file" (change)='handleImages($event)' >
    </div> 
    <br>
   <button type="submit" class="confirm"(click) = 
'add()'>Confirm</button>
 </form>

component.ts:

handleImages(Event){  
      this.selectedFile = Event.target.files[0];
      console.log(this.selectedFile);
      this.http.post('http://localhost:8080/upload',this.selectedFile)
}

Answer 1

You need change param File to MultipartFile

//@RequestMapping(method = RequestMethod.POST,value ="/upload")
@PostMapping(value = "/upload")
public void postImage(@RequestParam("file") MultipartFile file) throws IOException {
     System.out.println("received");
}

and wrap file content in FormData

handleImages(Event){  
      this.selectedFile = Event.target.files[0];
      let formData = new FormData();
      formData.append("file", this.selectedFile);
      console.log(this.selectedFile);
      this.http.post('http://localhost:8080/upload',formData)
}