Java 如何将数据从Angular 10表单传递到包含字符串和文件/图像的Spring Boot Rest API？

在尝试在Angular 10和Spring Boot rest Api之间通信时，我在Eclipse控制台中遇到以下错误

2020-10-06 23:44:12.261  WARN 33762 --- [nio-8090-exec-5] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize instance of `java.lang.String` out of START_OBJECT token; nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize instance of `java.lang.String` out of START_OBJECT token
 at [Source: (PushbackInputStream); line: 1, column: 535] (through reference chain: com.P.models.PModels["pProfilePic"])]

这是我棱角形的一部分

<form class="" action="" method="POST" enctype = "multipart/form-data" role="form" [formGroup]="form" (ngSubmit)="onSubmit()">

                  <input id="name" class="form-control" type="text" placeholder="Your Name" formControlName="pName"
                    class="form-control" [ngClass]="{ 'is-invalid': submitted && f.pName.errors }">
                  <div *ngIf="submitted || f.pName.invalid && (f.pName.dirty || f.pName.touched)"
                    class="alert alert-danger">
                    <div *ngIf="f.pName.errors?.required">Name is required</div>
                  </div>

<div class="form-group row mb-4">
            <label for="uploadPhoto" class="col-md-3 col-form-label">Upload Photo </label>
            <div class="col-md-8">
              <input type="text" class="form-control mb-2 transparent-disabled" id="uploadPhoto"
                placeholder="JPEG size 200kb max" [value]="filePhotoInfo" disabled>
               <div *ngIf="submitted || f.pProfilePhoto.invalid && (f.pProfilePhoto.dirty || f.pProfilePhoto.touched)"
                class="alert alert-danger">
                <div *ngIf="f.pProfilePhoto.errors?.required"> Upload JPEG file and it should not exceed 200kb</div>
              </div> 
              <button type="button" class="btn btn-outline-primary btn-upload"><i class="fas fa fa-cloud-upload"></i>
                Upload File

                <input
                      formControlName="pProfilePhoto" 
                      type="file" 
                      (change)="onPhotoSelect($event)"
                      class="form-control" 
                      >
              </button>
            </div>
          </div>

这是我的服务ts文件的一部分

export class PRegistration {
    public pId: number;
    public pName: string;
    public pProfilePic: File;

    constructor(    
        pId: number,
        pName: string,
        pProfilePic: File) 
        
        {
        this.pId = pId;
        this.pName = pName;
        this.pProfilePic = pProfilePic;
    }    

}

这是我的服务文件的一部分

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import {HttpClient,HttpHeaders} from "@angular/common/http";
import { environment } from 'src/environments/environment';
import { PRegistration } from 'src/app/Services/P-Services/p-registration';

@Injectable({
  providedIn: 'root'
})
export class PRegistrationService {
  constructor(private http: HttpClient) { }
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
    })
  }
  pRegistration(p):Observable<any>{

    return this.http.post<PRegistration>(environment.api_url+"save_user",p,this.httpOptions)
  
  }
}

这是我服务的一部分

public void saveUser(String pName,MultipartFile pProfilePic) {
    try {
        String pProfilePic_file = pProfilePic.getOriginalFilename();
        
        InputStream pProfilePic_is = pProfilePic.getInputStream();
        
        String pProfilePic_ts = String.valueOf(System.currentTimeMillis());
        try { Thread.sleep(1);} catch (InterruptedException e) { e.printStackTrace();}
        
        String rand = UUID.randomUUID().toString();
        
        String pProfilePic_name = pProfilePic_ts+rand+pProfilePic_file;
        
    PModels p = new PModels();
    
    p.setpName(pName);
    p.setpProfilePic(pProfilePic_name);

    pDao.save(p);
    
    String folder = "//Users//Desktop//p//";
    Path path = Paths.get(folder);
    if (!Files.exists(path)) {
        try {
            Files.createDirectory(path);

            }
        catch (IOException e) {
            e.printStackTrace();
            }
        System.out.println("Directory created");
        }
    else {
        System.out.println("Directory already exists");
        }
    folder = folder + p.getPId() + "//";
    Path path1 = Paths.get(folder);
    if (!Files.exists(path1)) {
        try {
            Files.createDirectory(path1);
        }
        catch (IOException e) {
            e.printStackTrace();
            }
        System.out.println("Directory created");
        }
    else {
        System.out.println("Directory already exists");
        }
      Files.copy(pProfilePic_is,Paths.get(folder+pProfilePic_name),StandardCopyOption.REPLACE_EXISTING);
  
  
} catch (IOException e) {
    e.printStackTrace();
}
    
}

这是我控制器的一部分

@PostMapping("/save_user")
     
    
      public void saveUser(@RequestBody PModels pModels) {
      this.pInfo.saveUser(pModels);
      
      System.out.println(pModels.getpName()); // Just for checking

---

在您的例子中，Spring框架假设传入的数据编码为application/json，但实际上编码为多方/表单数据。首先，您需要设置@PostMapping注释的“consumes”属性。然后您需要使用@RequestPart注释，而不是@RequestBody注释

我想这说明了怎么做

---

如果我可以添加另一个提示的话：通常，让同一个POJO（类）同时表示web服务的DB实体和DTO不是一个好主意。

我遵循了博客文章，并相应地合并了更改，但仍然会出现错误。路径为[]的上下文中Servlet[dispatcherServlet]的Servlet.service（）引发异常[请求处理失败；嵌套异常为org.springframework.web.multipart.MultipartException:未能解析多部分servlet请求；嵌套异常为javax.servlet.ServletException:org.apache.tomcat.util.http.fileupload.impl.InvalidContentTypeException:请求不包含多部分/表单数据或多部分/混合流，例如：Content-type header是application/json]在Angular服务中，您将内容类型header更改为application/json。我认为您希望执行类似于博客文章的操作，因此您可能希望发送多部分/表单数据。

public void saveUser(String pName,MultipartFile pProfilePic) {
    try {
        String pProfilePic_file = pProfilePic.getOriginalFilename();
        
        InputStream pProfilePic_is = pProfilePic.getInputStream();
        
        String pProfilePic_ts = String.valueOf(System.currentTimeMillis());
        try { Thread.sleep(1);} catch (InterruptedException e) { e.printStackTrace();}
        
        String rand = UUID.randomUUID().toString();
        
        String pProfilePic_name = pProfilePic_ts+rand+pProfilePic_file;
        
    PModels p = new PModels();
    
    p.setpName(pName);
    p.setpProfilePic(pProfilePic_name);

    pDao.save(p);
    
    String folder = "//Users//Desktop//p//";
    Path path = Paths.get(folder);
    if (!Files.exists(path)) {
        try {
            Files.createDirectory(path);

            }
        catch (IOException e) {
            e.printStackTrace();
            }
        System.out.println("Directory created");
        }
    else {
        System.out.println("Directory already exists");
        }
    folder = folder + p.getPId() + "//";
    Path path1 = Paths.get(folder);
    if (!Files.exists(path1)) {
        try {
            Files.createDirectory(path1);
        }
        catch (IOException e) {
            e.printStackTrace();
            }
        System.out.println("Directory created");
        }
    else {
        System.out.println("Directory already exists");
        }
      Files.copy(pProfilePic_is,Paths.get(folder+pProfilePic_name),StandardCopyOption.REPLACE_EXISTING);
  
  
} catch (IOException e) {
    e.printStackTrace();
}
    
}

@PostMapping("/save_user")
     
    
      public void saveUser(@RequestBody PModels pModels) {
      this.pInfo.saveUser(pModels);
      
      System.out.println(pModels.getpName()); // Just for checking