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

Question

我正在尝试将图像从我的 Angular 应用程序传输到 Spring boot，但我似乎无法使其工作。当我从 Angular 发送带有文件的 POST 请求时，spring boot 似乎根本没有反应，所以我用 PostMan 对其进行了测试，我收到以下错误：

 "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"

在 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

以及字符解码失败。

在 Spring 输出中，它似乎猜对了文件类型（图像 jpeg） 它的名字。

这是 Spring Boot 接收器：

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

稍后我打算在文件夹中写下图像，但现在我只想得到它。

下面是 Angular 部分

<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

您需要将参数 File 更改为 MultipartFile

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

并将文件内容包装在 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)
}