React 和 Spring Boot 不存在所需的请求部分“图像”答案

【问题标题】：Required request part 'image' is not present with React and Spring BootReact 和 Spring Boot 不存在所需的请求部分“图像”
【发布时间】：2022-01-17 23:53:36
【问题描述】：

我收到“MissingServletRequestPartException：所需的请求部分‘studentImg’不存在”，它适用于 Postman，但不适用于 React。我正在尝试在 Spring boot restful API 中调用端点。

后端控制器代码：

@PostMapping("/add")
public ResponseEntity<StudentFile> addStudentImg(HttpServletRequest request, @RequestParam("studentImg") MultipartFile studentImg) {
    boolean isStudent = (Boolean) request.getAttribute("isStudent");
    if(false == isStudent) {
        throw new EtAuthException("Only Student can add their image.");
    } else {
        Long addedBy = (Long) request.getAttribute("studentId");
        StudentFile studentFile = studentFileService.addStudentImg(studentImg, addedBy);
        return new ResponseEntity<>(studentFile, HttpStatus.CREATED);
    }   
}

React 组件的代码片段：

handleStudentImgChange(event) {
      this.setState({ studentImg: event.target.files[0] });
  }  

handleOnSubmit(event) {
    event.preventDefault();
    const { studentImg } = this.state;
    this.props.addStudentImg(studentImg);
    this.setState({ studentImg: null });
  }

const mapDispatchToProps = (dispatch) => {
  return {
    addStudentImg: (studentImg) => {
      dispatch(addStudentImgAction(studentImg));
    },
  };

export default connect(null, mapDispatchToProps)(AddStudentImgPage);

响应 Axios 调用：

import axios from "axios";

const token = "...";
export const addStudentImg = (studentImg) => {
  let bodyFormData = new FormData();
  bodyFormData.append("studentImg", studentImg[0]);
  const headers = {
    Authorization: `Bearer ${token}`,
    // Accept: "application/json",
    "Content-Type": "multipart/form-data",
  };
  return axios
    .request({
      method: "POST",
      url: "http://localhost:8080/api/studentfiles/add/",
      data: bodyFormData,
      headers: headers,
    })
    .then((res) => res.data);
};

网络日志：enter image description here enter image description here

我无法找到任何解决方案。请提供建议。
在此先感谢：D

【问题讨论】：

你能补充一下，你的网络日志对于这个请求是什么样的吗？
@IleshPatel 我已经添加了网络日志 {headers, payload}，如果您还需要其他内容，请告诉我...还有prescriptionImg == studentImg

标签： javascript java reactjs spring-boot axios

【解决方案1】：

首先我更改了这些行：

let bodyFormData = new FormData();
bodyFormData.append("studentImg", studentImg[0]);

这些：

const bodyFormData = new FormData();
const blob = new Blob([studentImg], {type: studentImg.type});
bodyFormData.append("studentImg", blob);

当我在bodyFormData 上方登录studentImg 时，我得到类似这样的响应：{type: 'ADD_STUDENT_IMG', studentImg: File} json 对象是这样的：

然后，我把这些线放进去，它们就可以正常工作了。

const bodyFormData = new FormData();
const blob = new Blob([studentImg.studentImg], {
  type: studentImg.studentImg.type,
});
bodyFormData.append("studentImg", blob);

要了解这些行的工作原理：
请阅读FormDatadocs 以及一些关于它如何通过here 序列化的附加信息。

如有任何疑问，请询问。（PS prescriptionImg == studentImg 图）
谢谢：D

【讨论】：

【解决方案2】：

您在设置时已经设置了文件[0]

handleStudentImgChange(event) {
      this.setState({ studentImg: event.target.files[0] });
  }

再一次，你正在尝试访问

bodyFormData.append("studentImg", studentImg[0]);

这个，好像不对，改成

bodyFormData.append("studentImg", studentImg);

看看它是否有效..

【讨论】：

删除后也不行。