如何将放置在reactjs中的json对象内的图像发布到Spring Boot后端Rest API

发布时间:2020-07-07 17:34

我正在创建一个简单的应用程序,该应用程序将前端的用户详细信息发送给后端。该应用程序的前端是使用ReactJs开发的,而后端则完全是spring boot。在这里,您可以看到前端生成的对象,然后将其发送到后端。

    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表单中的“提交”按钮时,将使用以下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,setters,没有args构造函数和所有args构造函数 但是,当我单击前端的“提交”按钮时,出现以下异常,

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中。

我在这里做错事了吗,或者这是什么错误。谁能解释我

回答1

将您的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)
}