Springboot 파일업로드 로직 추가 및 vue 구현
지난 게시글에서 파일업로드를 하면 db에 파일 이름이 저장되고 assets하위 폴더에 이미지 파일을 저장시키는 것 까지 하였고
이후 글쓰기를 통하여 파일업로드를 하고 CarDetail.vue에 이미지 파일을 보여주는것 까지 구현을 하였다.
이미지를 보여주기 위하여 back단에서 해당하는 carId(게시글)의 fileName을 읽어주는 로직을 추가하였다.
carId를 이용하여 fileName을 읽어야 하기 때문에 PathVariable에는 carId가 들어간다.
서비스에서 carId를 이용한 File을 찾도록 하는 로직 구현
Mapper에서 file 테이블의 해당 carId의 컬럼 추출하는 쿼리 작성
이제 vue에서 상세페이지에 글의 정보 및 이미지를 띄워서 보여주기만 하면 된다.
우선 앞서 만든 car/showFile의 api를 불러오는 메서드를 구현해야 한다.
carId를 담아주고 axios로 get요청을 하고 userFile에 담아준다.
그리고 assets하위에 이미지들이 저장이 되어있기 때문에 경로를 아래처럼 지정하였다.
호출하는 방법은 require('경로')
이제 게시글 상세페이지 화면에서 확인을 해보면 된다.
정상적으로 상세내용과 이미지를 볼 수 있게 되었다!
상세페이지를 만든 이후
상세페이지의 댓글 보여주기, mid를 이용해 권한을 가진 사용자가 게시글을 수정/삭제 할수 있도록 기능을 만들었다.
이제 댓글 기능도(vue) 게시글기능처럼 만들 예정이다.