Spring boot [파일 업로드]

 

게시글을 작성할때 이미지파일을 업로드 하기 위하여 글쓰기 기능을 수정하였다.

 

파일업로드를 통하여 File 테이블을 db에 우선 추가하여 주고, 컬럼으로는 게시글의 id를 받기 위하여 carId, fileName, fid를 넣었다. 

 

만약 똑같은 이미지를 업로드 할 상황이 있다면 db의 저장된 fileName이 똑같기 떄문에 충돌이 일어날 상황을 방지하기 위하여 fileUpload기능중 carId + fileName으로 저장되도록 만들었다. 

 

 

 

기존의 글쓰기 controller

 

 

 

 

 

 

 

 

 

 

수정한 controller

 

   // 글 및 파일 등록
    @SneakyThrows
    @PostMapping("/img")
    public String uploadFile(@RequestParam("author")String author,
                             @RequestParam("carName")String carName,
                             @RequestParam("year")String year,
                             @RequestParam("distance")String distance,
                             @RequestParam("fuel")String fuel,
                             @RequestParam("area")String area,
                             @RequestParam("price")String price,
                             @RequestParam("content")String content,
                             @RequestParam("file")MultipartFile multipartFile){


        CarDTO carDTO = new CarDTO();
        carDTO.setAuthor(author.replace("\"", ""));
        carDTO.setCarName(carName.replace("\"", ""));
        carDTO.setYear(year.replace("\"", ""));
        carDTO.setDistance(distance.replace("\"", ""));
        carDTO.setFuel(fuel.replace("\"", ""));
        carDTO.setArea(area.replace("\"", ""));
        carDTO.setPrice(price.replace("\"", ""));
        carDTO.setContent(content.replace("\"", ""));

       int newId = carService.postCar(carDTO);
       log.debug("test : " + newId);

       return carService.saveFile(newId, multipartFile);

    }

 

 

 

 

file과 다른 컬럼들을 DTO에 한번에 담을 수 없기 때문에 하나하나 RequestParam을 사용하였다. 

 

그리고 carDTO에 들어올때는 string형식이기 때문에 큰따옴표("")으로 들오기때문에 replace를 사용하여 큰따옴표를 생략하여 주었다.

 

newId -> 파일을 저장(savefile)할때 carId를 넘겨주기 위해 글을 쓸때 가져옴

 

 

 

 

 

 

 

 

CarService.java

 

 

 

 

carId값을 가져오려면 carId를 정하는 로직이 추가적으로 필요하다. (getNewCarIdValue)

carId를 지정하지 않으면 savefile에 newId를 넘겨 줄 수 없다.

왜냐하면 글이 아직 작성이 되지 않은 상태이기 때문에 carId가 존재하지 않기 때문이다. 따라서 기존의 작성일, 작성시간을 직접 set한것 처럼 setCarId를 사용하여 DTO에 먼저 실어주어야 해당하는 carId로 savefile에 넘겨 줄 수 있게 된다.

 

 

 

 

 

 

 

 

 

 

setCarId를 할때 사용한 getNewCarIdValue 메서드의 기능은 다음과 같다.

 

 

 

우선 carId의 최대값을 carDAO를 통해 가져온다.

Max를 사용한 쿼리를 사용하여 car테이블의 가장 큰 carId를 가져온다. (carDAO.maxCarId)

 

 

service의 id를 지정해주는 메서드

 

 

따라서 현재는 carOfMaxId에 carId의 가장 큰 값이 들어간 상태이다.

 

carOfMaxId로 들어온 값이 0이면, 즉 게시물이 하나도 없으면 result값에 1을 리턴시켜서 

 

setCarId를 하였을때 1값이 오도록 -> carId=1

 

만약 carOfMaxId이 0이 아니면 carOfMaxId + 1을 하여 마지막으로 쓴 글의 carId +1 의 값을 리턴시켜 넘겨준다.

 

따라서 마지막으로 controller의 newId에는 그에 해당하는 carId가 넘어가게 된다.

 

 

 

 

 

 

 

 

 

 

그리고 saveFile을 통하여 넘어온 carId를 이용해 fileDTO에 파일이름(fileName, carId)가 써지도록 로직을 만들었다.

 

carService.java

 

앞서 말하였듯이 db로 들어오는 파일의 이름을 변경시켜주기 위해 

imgFileName으로 파일의 이름이 구분이 되도록 carId가 맨앞에 나오도록 처리해준다.

 

 

68번째 줄에서 파일의 경로도 지정하였다. 

 

if문을 통과하면서 carId가 set되고 FileName 또한 imgFileName으로 set이 된다.

 

 

 

 

 

파일이 저장되는 경로는 다음과 같이 지정하였다.

 

carService.java

 

 

 

 

 

 

 

 

 

 

 

 

 

fileUpload 쿼리는 다음과 같다.

 

FileMapper.xml

 

 

 

 

 

 

 

 

글을 작성하면서 파일을 업로드하고 저장버튼을 누르면 다음과 같이 9번째 carId의 이미지가

설정해준 경로에 제대로 들어온 것을 볼 수 있다!

 

 

 

 

 

 

 

 

 

 

 

 

 

file테이블에도 fileName과 carId가 정상적으로 들어왔다!

 

 

 

 

 

 

 

fileUpload로직을 성공적으로 추가하였다.

 

 

 

 

 

 

 

 

 

다음에는 vue.js로 carDetail.vue를 만들어 상세페이지 목록을 보여주게 만들고 

해당글에 정보와 file이미지를 띄워주도록 작업을 할 예정이다.