如何从Reactjs向springboot2后端发出axios post或任何其他api post调用

我有springboot2后端restpostapi作为如下所示:-

    @RequestMapping(value = "/profile", method = RequestMethod.POST)
public Profile saveOrUpdateProfile(@RequestParam("file") MultipartFile file, @RequestBody Profile profile, String path) {
    logger.info("file name:" + file.getOriginalFilename());
    if (file != null) {
        profile.setFileDownloadUri(profileService.storeFile(file, path));
        return profileService.saveOrUpdateProfile(profile);
    } else {
        return null;
    }
}

  static postProfile(selectedFile, profile, replacePhotoPath) {
if (selectedFile) {
  let serverResponse;
  let formData = new FormData();
  formData.append("porofile", profile);
  formData.append("file", selectedFile);
  formData.append("path", replacePhotoPath);
  axios.post('http://localhost:8080/profile', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  .then(res => {
    console.log('res:' + res)
    serverResponse = res.data;
  })
  .catch((error) => {
    // handle this error
    console.log('error: ' + error);
    //setMessageFromServer(error.data)
   POST http://localhost:8080/profile 400 serverResponse = error.data;
  })
  return serverResponse;
}

}

我得到一个错误:

http://localhost:8080/profile 415

你可以理解,我试图张贴一个个人资料与照片文件。我是Reactjs的新手,尝试通过编码来学习。我不知道如何对这个API进行axios post调用。如果可以通过使用axios以外的其他API来实现这一点,那对我来说就太好了。提前谢谢!

更新问题1:- 终结点:-

    @RequestMapping(value = "/profile2", method = RequestMethod.POST, consumes = MULTIPART_FORM_DATA)
public ResponseEntity<?> saveProfile(@RequestParam("file") MultipartFile file, @RequestParam("path") String path, @RequestParam("profile") Profile profile) {
    logger.info("file name:" + file.getOriginalFilename());
    return null;
}

static postProfile(selectedFile, replacePhotoPath, profile) {
if (selectedFile) {
  let serverResponse;
  let formData = new FormData();
  formData.append("file", selectedFile);
  formData.append("path", replacePhotoPath);
  formData.append("profile", profile)
  axios.post('http://localhost:8080/profile', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  .then(res => {
    console.log('res:' + res)
    serverResponse = res.data;
  })
  .catch((error) => {
    // handle this error
    console.log('error: ' + error);
    //setMessageFromServer(error.data)
    serverResponse = error.data;
  })
  return serverResponse;
}
}

我有不同的想法错误:-

http://localhost:8080/剖面 400

    @PostMapping("/profile2")
public void saveProfile(@ModelAttribute ProfileWrapper model) {
    logger.info("image: " + model.getImage());
    logger.info("profile: " + model.getProfile());
}

  static postData(selectedFile, replacePhotoPath, profile) {
if (selectedFile) {
  let serverResponse;
  let formData = new FormData();
  formData.append("porofile", profile);
  formData.append("file", selectedFile);
  formData.append("path", replacePhotoPath);
  axios.post('http://localhost:8080/profile', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  .then(res => {
    console.log('res:' + res)
    serverResponse = res.data;
    //this.postProfile(data, selectedCity, history);
  })
  .catch((error) => {
    // handle this error
    console.log('error: ' + error);
    //setMessageFromServer(error.data)
    serverResponse = error.data;
  })
  return serverResponse;
}

:图像:空 :配置文件:空

然后我将Reactjs更新为:-

  static postData(selectedFile, replacePhotoPath, profile, selectedCity, history) {
if (selectedFile) {
  let serverResponse;
  let wrappe = {
    "profile": profile,
    "image" : selectedFile,
    "path": replacePhotoPath 
  }
  // let formData = new FormData();
  // formData.append("porofile", profile);
  // formData.append("file", selectedFile);
  // formData.append("path", replacePhotoPath);
  axios.post('http://localhost:8080/profile', wrappe, {
    // headers: {
    //   'Content-Type': 'multipart/form-data'
    // }
  })
  .then(res => {
    console.log('res:' + res)
    serverResponse = res.data;
    //this.postProfile(data, selectedCity, history);
  })
  .catch((error) => {
    // handle this error
    console.log('error: ' + error);
    //setMessageFromServer(error.data)
    serverResponse = error.data;
  })
  return serverResponse;
}
}

同样没有错误,但它到达端点时模型的成员为null。为了确保这一点,我调试了前端代码,以检查我是否填写了正确的数据,并且它不是空的。一切看起来都很好。

更新3:-

public class ProfileWrapper {

private MultipartFile image;
private Profile profile;

public ProfileWrapper() {
}

public ProfileWrapper( MultipartFile image, Profile profile) {
    this.image = image;
    this.profile = profile;

}

public Profile getProfile() {
    return profile;
}

public void setProfile(Profile profile) {
    this.profile = profile;
}

public MultipartFile getImage() {
    return image;
}

public void setImage(MultipartFile image) {
    this.image = image;
}
}

[调度员服务]:Servlet.service服务()对于路径为[]的上下文中的servlet[dispatcherServlet]引发了异常[请求处理失败;嵌套异常为org.springframework.http.converter.HttpMessageConversionException异常:类型定义错误:[简单类型,类org.springframework.web网站.multipart.multipart文件]; 嵌套异常为com.fasterxml.jackson公司.databind.exc.InvalidDefinitionException异常:无法构造的实例 org.springframework.web.multipart.MultipartFile 在[Source:(PushbackInputStream);行:1,列:269](通过引用链:com.profile.wrapper文件.ProfileWrapper[“image”])]及其根本原因

com.fasterxml.jackson公司.databind.exc.InvalidDefinitionException异常:无法构造的实例 org.springframework.web网站.multipart.multipart文件 在[Source:(PushbackInputStream);行:1,列:269](通过引用链:com.profile.wrapper文件.ProfileWrapper[“图像”])