IT 수업 20주차 (134) 이미지 업로드

● boardPostMapping

Dto에 BoardDto를 만들어 준다.

 

 

 

 

 

Controller에 BoardController를 만들어 준다.

 

 

board와 RequestMapping해주고

board의 post 페이지와 GetMapping을 해준다.

 

 

 

다음은 view에 새로운 폴더인 board폴더를 만들어주고 그안에 post페이지를 나타낼 post.jsp 파일을 만들어 준다.

 

 

post.jsp에서 form을 작성해준다.

 

< 실행 화면 >

 

BoardController에서 PostMapping을 작성해준다.

 

값을 넣어 실행시켜본다.

 

그러면 콘솔창에 해당 파일이 보이게 된다.

 

 

 

 

● 이미지 업로드

view의 board폴더에 imagepost.jsp 파일을 만들어 준다.

 

그리고 BoardController에 이미지 업로드를 위한 페이지인 imagepost페이지와 getMapping을 해준다.

 

그리고 imagepost.jsp로 와서 드래그드랍이 가능하도록 작성해준다.

 

 

실행하여 이미지를 해당 공간에 드래그 드랍하면 이미지가 미리보기 되는 동시에 개발도구에서 이미지 정보를 확인 할 수 있다.

 

 

 

imagepost.jsp로 가서 upload버튼을 위한 a태그를 추가해준다.

 

 

 

그리고 내려와서 uploadBtn이 작동하도록 작성해준다.

 

axios를 사용하기 위해 구글에 axios cdn을 검색해 div id="d3" 밑에 코드를 붙여넣기 해준다.

 

 

그리고 내려와서 axios.post를 작성해준다.

 

 

 

formData라는 것을 만들어 전역설정을 해준다.

 

 

for문 안에 formData에 이미지 저장하는 코드를 작성해준다.

( 다른 필요없는 console.log는 주석처리 )

 

 

 

이번에는 upload버튼을 작동시켜본다.

imagepost.jsp에 작성해준다.

 

BoardController에 imagepost를 postmapping해준다.

 

프로그램을 실행시켜 upload 버튼을 눌러본다.

 

그러면 해당 이미지 정보가 나오게 된다.

 

한번에 여러 이미지를 올리는 것도 가능하다.

 

 

이번에는 이미지를 업로드 하면 컴퓨터의 upload 폴더에 해당 이미지들이 다운로드 되는 것을 구현해본다.

개별폴더 uuid를 생성한다.

 

 

구글에서 이미지들을 가져와 업로드 해본다.

 

 

업로드 버튼을 누르면 해당 이미지가 다운로드 된다.