Javascript 如何将reactjs中json对象内的图像发布到spring boot back end rest api
我正在创建一个简单的应用程序,它在前端获取用户详细信息,并将其发送到后端。应用程序的前端是使用ReactJs开发的,而后端则完全是spring boot。在这里,您可以看到我在前端生成的对象,然后它将被发送到后端Javascript 如何将reactjs中json对象内的图像发布到spring boot back end rest api,javascript,reactjs,spring-boot,multipartform-data,Javascript,Reactjs,Spring Boot,Multipartform Data,我正在创建一个简单的应用程序,它在前端获取用户详细信息,并将其发送到后端。应用程序的前端是使用ReactJs开发的,而后端则完全是spring boot。在这里,您可以看到我在前端生成的对象,然后它将被发送到后端 this.state = { user_details:{ first_name: '', last_name: '', phone_number: '', emai
this.state = {
user_details:{
first_name: '',
last_name: '',
phone_number: '',
email: '',
password: '',
birth_date: new Date(),
nic: '',
street_address: '',
street_address2: '',
city: '',
state:'',
zip_code: '',
nationality: '',
religion: '',
photo: null
}
正如您在上面看到的,我正在从用户处获取一个图像文件,然后将该图像分配给this.state.user_details.photo,该图像最初为空
当用户单击reactJs表单中的submit按钮时,将使用以下axios调用将user_details对象发送到后端
saveUserDetails(user_details){
return axios.post("http://localhost:8080/teacher_details",user_details)
}
此请求将由后端定义的以下PostMapping方法处理
@PostMapping("/teacher_details")
public void saveTeacherDetails(@RequestBody UserDetails userDetails) {
userRepo.save(userDetails);
}
UserDetails类是负责将请求主体中的值映射到对象的包装器类,下面是UserDetails类的成员变量
private String email;
private String nic;
private String firstName;
private String lastName;
private String phoneNumber;
private Date birthDate;
private String streetAddr1;
private String streedAddr2;
private String state;
private String city;
private String zipCode;
private String nationality;
private String religion;
private MultipartFile photo;
我有所有的getter、setter、no-args构造函数和all-args构造函数
但是当我点击前端的submit按钮时,我得到了以下异常:
com.fasterxml.jackson.databind.exc.InvalidDefinitionException: Cannot construct instance of `org.springframework.web.multipart.MultipartFile` (no Creators, like default constructor, exist): abstract types either need to be mapped to concrete types, have custom deserializer, or contain additional type information
我不知道这里发生了什么。我只想将图像和数据一起放入UserDetails的ArrayList中
我在这里做错了什么,或者这里的错误是什么。谁能解释一下,我将json更改为formdata,下面的函数会有所帮助
createFormData(object, form, namespace) {
const formData = form || new FormData();
for (let property in object) {
if (!object.hasOwnProperty(property) || !object[property]) {
continue;
}
const formKey = namespace ? `${namespace}[${property}]` : property;
if (object[property] instanceof Date) {
formData.append(formKey, object[property].toISOString());
} else if (typeof object[property] === 'object' && !(object[property] instanceof File)) {
createFormData(object[property], formData, formKey);
} else {
formData.append(formKey, object[property]);
}
}
return formData;
}
并删除控制器中的@RequestBody
,因为我们现在发布的不是json,而是表单数据
现在修改这个方法
saveUserDetails(user_details){
return axios.post("http://localhost:8080/teacher_details",user_details)
}
到
saveUserDetails(user_details){
let formData=createFormData(user_details);
return axios.post("http://localhost:8080/teacher_details",formData)
}