유저가 업로드 한 이미지 파일 로컬에서 가져와 사용하는 방법!

보통 혼자 개발할 때나 공부할 때 이미지는 이렇게 사용할 것이다. 

 

이렇게 소스 안에 img 폴더를 세팅해놓고 

 

 

이미지들이 저장되어 있는 위치를 설정 파일에 명시해 준 다음

 

 

img 태그의 src 속성에 파일 이름을 적어주는 식으로!

 

그러나 실무에선 이렇게 사용하지 않는다고 한다. 보안 문제도 있고, 프로젝트 볼륨이 커지기 때문 ( 예를 들어 업로드가 많이 되는 사이트인데 파일을 전부 이렇게 프로젝트 내 폴더에 저장하게 세팅하면 용량이 상상을 초월할 것이다 )

 

그럼 어떤 방법을 사용할까?

 

사실 가장 쉬운 선택지는 설정 파일에서 img 폴더 경로를 파일 저장 폴더로 잡아주는 것이다.

 

이런 식으로!

그러나 이 방법 역시 보안 이슈가 있어서 지양하고 실무에선 이 문제를 해결하기 위해 컨트롤러를 활용한다고 한다.

이를 이해하기 위해선 img 태그의 작동 원리에 대해서 다시 한번 생각해 볼 필요가 있다

브라우져가 html 파일을 읽다가 src 태그를 만나면 그 속성의 값을 '요청'하는 것이라는 걸. 요청! request!

우리가 컨트롤러로 받아서 처리하는 그거! 그러니까 이렇게 처리 가능하다.

 

 

img 태그의 src 속성값으로 컨트롤러에 매핑할 주소 + 파일을 식별할 수있는 ID를 파라미터로 넘기면

 

컨트롤러에서 처리해 응답하는 일만 남았다. 이 부분은 아래와 같이 처리 가능하다

 

    @GetMapping(path = "/{id}")
    public void setImageFileById(@PathVariable(name = "id") Integer id, HttpServletResponse response)
            throws IOException {
 
        FileInfo fileInfo = fileService.getFileInfo(id);
        // 파일 정보를 찾고
        StringBuilder sb = new StringBuilder("file:///c:/tmp/");
        // 파일이 실제로 저장되어 있는 경로에
        String fileName = fileInfo.getSaveFileName();
        sb.append(fileName);
        // 파일 이름을 더해
        
        URL fileUrl = new URL(sb.toString());
        // file URL을 생성하고 
        
        IOUtils.copy(fileUrl.openStream(), response.getOutputStream());
        // IOUtils.copy는 input에서 output으로 encoding 맞춰서 복사하는 메소드다
        // openStream으로 fileUrl의 통로( 입력 스트림 )를 열고 respons의 outputStream에 복사하면 끝
 
    }

 

이렇게 하면 프로젝트 안의 img 폴더를 지우고 페이지에 접속해봐도 그림이 잘 출력되는 걸 볼 수 있다!

 

참고 : 

 

JSP ) 이미지 주소 숨기기, Img src 숨기기. 서블릿 태우기 (Servlet)