Question 73082 in Reactjs Question posted in
The new location for the React Documentation can be found here.

I want to pass files and information from React to Spring (@RequestParam or @RequestPart) – Reactjs

Spring says no data found in @RequestParam I tried changing @RequestPart or value but it doesn’t work. How can I make a connection? Thanks for any advice, solution

react

boardWriter: sessionStorage.getItem("memberID"),
boardTitle: title,
boardContents: contents,
boardFile: file,
}

formData.append("saveData", new Blob([saveData]), {
type: "application/json",
})  
formData.append("boardFile", file);

    axios
      .post("http://localhost:8080/api/board/write", saveData, {
        headers: {
          "Content-Type": "multipart/form-data",
        }
      })
      .then(res => res.data)
      .catch(err => console.log(err));
}

controller

@PostMapping("/write")
    public void save(@RequestPart("saveData") BoardDTO boardDTO,
                     @RequestPart(value = "boardFile") MultipartFile file) throws IOException {
        
String fileName = file.getOriginalFilename();
        
file.transferTo(new File(fileName));
        
boardDTO.setBoardFile(fileName);
        
boardService.save(boardDTO);
  
}

repository


public int save(BoardDTO boardDTO) {
        
return sql.insert("Board.save", boardDTO);
    
}

service


public int save(BoardDTO boardDTO) {
        
return boardRepository.save(boardDTO);
    
}

**error**
400 http bad request
Required BoardDTO parameter 'boardDTO' is not present
Tags:

2

Answers


  1. 0

    You can use @RequestParam and @ModelAttribute annotations for DTO with file.
    There is some other code because I reuse my code before wrote.
    Focus how to get data at API endpoints.

    Here is my example.

    React
        const formData = new FormData();
    const data = {
      boardWriter: "this is writer",
      boardTitle: 'this is title',
      boardContents: 'this is boardContents'
    }
    formData.append('boardFile', this.files[0]);
    formData.append('saveData', JSON.stringify(data))
    axios.post('http://localhost:8081/dto',
        formData,
        {headers: {'Content-Type': 'multipart/form-data'}})
    Spring
        @PostMapping(value = "/dto")
    public @ResponseBody
    String uploadFileInDto(@RequestParam("saveData") String saveData,
                           @RequestParam("boardFile") MultipartFile file) throws JsonProcessingException {
        ObjectMapper objectMapper = new ObjectMapper();
        BoardDTO boardDTO = objectMapper.readValue(saveData, BoardDTO.class);
        System.out.println(saveData);
        System.out.println(boardDTO);
        System.out.println(file);
        return "upload success";
    }

    enter image description here

    Better Way

    I think this is the better way for management back-end code.

    React
        const formData = new FormData();
    const data = {
      boardWriter: "this is writer",
      boardTitle: 'this is title',
      boardContents: 'this is boardContents'
    }
    for (let key in data) {
      formData.append(key, data[key])
    }
    formData.append('boardFile', this.files[0]);
    axios.post('http://localhost:8081/dto-2',
        formData,
        {headers: {'Content-Type': 'multipart/form-data'}})
    Spring
        @PostMapping(value = "/dto-2")
    public @ResponseBody
    String uploadFileInDto(@ModelAttribute BoardDTO boardDTO,
                           @RequestParam("boardFile") MultipartFile file) {
        System.out.println(boardDTO);
        System.out.println(file);
        return "upload success";
    }

    enter image description here

    And you need to setter method for DTO.

    package blog.in.action.dto;

import lombok.*;

@AllArgsConstructor
@NoArgsConstructor
@Builder
@Getter
@Setter
public class BoardDTO {

    private String boardWriter;
    private String boardTitle;
    private String boardContents;
}
    Login or Signup to reply.
  2. 0

    Change this:

    formData.append("saveData", new Blob([saveData]), {
type: "application/json",
})

    to this:

        formData.append("saveData", new Blob([JSON.stringify(saveData)], {
        type: "application/json"
    }));

    Also, it seems that you have mistakenly sent saveData instead of formData in the following code.

    axios
  .post("http://localhost:8080/api/board/write", saveData, {
    headers: {
      "Content-Type": "multipart/form-data",
    }
  })

    Please change it to:

       axios
      .post("http://localhost:8080/api/board/write", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        }
      })

    This should make everything work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search