게시물 가져오기, 다중이미지 올리기

☑ 게시물 가져오기

[리액트 코드 작성]
function App() {
 const [title, setTitle] = useState("");
 const [content,setContent] = useState("");
 const [files, setFiles] = useState([]);
 const [posts, setPosts] = useState([]);
 const Java에업로드 = () =>
 
 // Form 특정값을 가져와서 넘겨줄때 사용하는 객체
 const formData = new FormData();
 Array.from(files).forEach((file) => {
     formData.append("files",file);
 
 });
 formData.append("title",title);
 formData.append("content",content);
 
 //자바 컨트롤러에 데이터 전송!
 axios.post("http://localhost:000/gallerry/upload",formData,{
    headers: {
     //전송할 데이터에 글자가 아닌 파일이 함께 전송된다 머릿말로 알려주기
     "Content-Type": "multipart/form-data",
    },
   }):
   alert("이미지 전송되었습니다");
   게시물가져오기();
 };
 //const 기능을 작성해놓고 필요할 때 기능을 사용하기 위해 설정
 const 게시물가져오기 = () => {
  axios
  .get("http://localhost:0000/posts")//자바 컨트롤러 url api 주소에서 데이터 가져오기
  .then((response) => {
   setPosts(response.data);
   console.log(response.data);
  });
 };

 

☑ 자마 controller에서 작성한 구문

@PostMapping("/gellery/uplaod")
//ResponseEntity = 데이터가 무사히 전달되고 있는지 체크
public ResponseEntity<String> uploadImages (@RequestParam("files") MultipartFile[] files,
                                            @RequestParam("title") String title,
                                            @RequestParam("content")String content) {
        postService.uploadImages(files,title,content);
        return ResponseEntity.ok("이미지 db 업로드 성공");
                                            
      }
 @GetMapping("/posts") //db에 저장된 게시글 내용 이미지 가져오기
 pulic ResponseEntity<List<post>> findAll() {// <> 객체를 구분하는 구분괄호
    //postService.findAll(); -> 데이터가 무수히 많아 목록으로 가져와야 하는데
    //리스트로 전달안해주면 map ~ react 문제가 발생
    List<Post> posts = postServic.findAll();
    return ResponseEntity.ok(posts);
   }
 }

 

☑ 자바 설정 WebConfig에서 어노테이션 누락시 에러 발생

@Configuration //설정
publci class WebConfig implements WebMvcConfigurer {
   @Override
   public void addResourceHandlers(ResourceHandlerRegistry r) {
         r.addResourceHandler("/images/**")
          .addResourceLocations("file:C:/Users/user1/Desktop/saveImage/");
   
   }
   @Overriede
   public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                 .allowedOrigins("http://localhost:3000")
                 .allowedMethods("GET","POST","DELETE","OPTIONS")
                 .allowedHeaders("*");
   
   
   }
}