Springboot [썸네일업로드 기능 추가]

CarWrite.vue를 통하여 글을 쓸때 지금까지는 상세페이지에 글의 정보 + 이미지만 보여주도록 하였는데 썸네일 업로드를 추가하여 글을 쓸때 썸네일 등록시 Car.vue에서 등록한 썸네일이 데이터 테이블에 바로 보여지도록 만들었다. 

 

원래는 Car테이블의 썸네일 컬럼에 이미지url을 넣어서 보여주어서 사용자는 썸네일에 대한 접근이 불가능 하였지만 기능 추가로 인해 사용자가 글을 쓸때 직접 원하는 썸네일을 등록할 수 있게 된다.

 

 

우선 CarController부터 수정을 하였다.

 

CarController.java

 

ReauestParam에 "thumb"추가.

 

 

 

 

 

 

 

 

 

 

 

CarController.java

 

 

 

 

그리고 썸네일을 저장하는 carService를 만들어준다. (해당하는 carId를 넘겨주면서)

 

 

 

 

CarService.java

 

saveThumb메서드는 지난번 파일업로드를 할때 만들었던 saveFile메서드와 구조적으로 동일하다. 여기서 변수이름(thumbFileName), 파일이 저장되는 path(경로)의 위치, DAO를 통한 mapper만 추가, 변경 해주면 된다.

 

thumbFileName에 받은 carId와 원래의 파일이름인 OriginalFilename을 합쳐서 지정해준다.

파일의 경로 uploadThumbFolder는 아래와 같다.

여기에 앞서 지정해준 thumbFileName으로 해당하는 파일을 넣을 path를 지정해준다.(thumbFilePath)

 

 

 

CarService.java

 

파일의 경로는 assets하위에 thumb라는 디렉토리를 새로 생성하였고 thumb디렉토리에 업로드한 파일이 생성된다.

 

 

 

 

 

그리고 if문으로 들어가서 파일의 size가 0이 아니라면 (파일이 들어온다면) 

앞서 지정해준 경로 thumbFilePath에 파일을 write 해준다.

 

 

if문을 통과하면 carDAO.thumbUpload에 받아온 carId, 지정한 파일명 thumbFileName를 넘겨주고

 Car테이블의 해당 carId의 thumb컬럼에 해당 파일의 이름(thumbFileName)이 post된다.

 

 

 

CarDAO.java

 

 

 

CarMapper.java

 

 

 

 

구현하는중 작은 문제가 발생하였었는데 처음에 Mapper에 insert쿼리를 사용하려고 했으나 insert에는 조건절을 사용할수도 없었고 insert를 하면 notNull로 지정되어있는 컬럼은 무조건 insert시켜줘야 하기 때문에 오류가 났었다. 

 

내가 지금 하려고 하는것은 해당 carId에 thumb컬럼에 파일이름만 들어가게 해야하기 때문에 insert를 사용하면 안되고

update쿼리를 사용하여 thumb컬럼은 notNull을 해제하고 초기 null값이 들어와있을때 update로 파일명을 바꿔주도록 구현하니 정상적으로 잘 되었다!

 

 

 

 

 

 

 

 

아래는 저번에 구현하였던 fileupload인데 썸네일을 만들기전 참고하면 좋을것 같다.

 

참고!

 

https://z00h.tistory.com/87

Spring boot [파일 업로드]