💡 게시판 - 파일 업로드 3(개선)

💡 게시판 - 파일 업로드 2에서 개선할 점으로

• 사진을 보기 위해서는 서버 재실행이 필요하다.
• 사진을 클릭해서 보는 것이 아닌 게시글 상세 페이지에 보이고 싶다.

를 이야기 했다.

이번 글에서는 작성한 파일 업로드의 코드를 개선하고 이미지를 클릭해서 보이는 것이 아닌 게시글 상세페이지에서 보이도록 개선했다.

BoardService의 save 메서드

 public void save(Board board, MultipartFile file) throws Exception {

        if(!file.isEmpty()){ //파일 업로드가 있는 경우에만 실행
            UploadFile uploadFile = fileStore.storeFile(file);
            board.setFilename(uploadFile.getUploadFilName());

            board.setFilepath(uploadFile.getStoreFileName());
        }

        boardRepository.save(board);
    }

FileStore

@Component
public class FileStore {

    @Value("${file.dir}")
    private String fileDir;

    public String getFullPath(String filename) {
        return fileDir + filename;
    }

    public UploadFile storeFile(MultipartFile multipartFile) throws IOException {
        if (multipartFile.isEmpty()) {
            return null;
        }

        String originalFilename = multipartFile.getOriginalFilename();
        String storeFileName = createStoreFileName(originalFilename); //랜덤의 uuid를 추가한 파일 이름
        multipartFile.transferTo(new File(getFullPath(storeFileName)));

        return new UploadFile(originalFilename, storeFileName);
    }

    // 서버 내부에서 관리하는 파일명은 유일한 이름을 생성하는 UUID를 사용해서 충돌하지 않도록 한다.
    private String createStoreFileName(String originalFilename) {
        String ext = extractExt(originalFilename);
        String uuid = UUID.randomUUID().toString(); //파일 이름 중복 방지
        return uuid + "." + ext;
    }

    //확장자를 별도로 추출해서 서버 내부에서 관리하는 파일명에도 붙여준다.
    //Ex) a.png라는 이름으로 업로드하면 2def12-42qd-3214-e2dqda2.png 와 같이 확장자를 추가해서 저장한다.
    private String extractExt(String originalFilename) {
        int pos = originalFilename.lastIndexOf("."); //파일의 확장자 추출 ex) .png .img
        return originalFilename.substring(pos + 1);
    }
}

원래 BoardService의 save 메서드에서 처리하던 파일 업로드 과정을 FileStore 클래스를 만들어서 개선을 했다. 덕분에 save 메서드가 깔끔해졌다.

이제 게시글 상세 페이지에서 업로드 한 이미지가 보이도록 처리를 하겠다.

이미지 파일 부분

<span th:if="${post.filepath != null}">
     <img th:src="@{'/images/' + ${post.filepath}}" width="300" height="300"/><br>
</span>

방법은 간단하다. 게시글 상세 페이지를 보여주는 html에 위의 코드를 추가하면 된다. post.filepath를 해서 파일의 경로를 불러와서 이미지를 보여준다.

적용이 됐는지 확인해보자.

사진처럼 작성을 하고 이미지 파일을 첨부하겠다.

게시글 작성 후 게시글 상세 페이지에 들어가니 이미지가 보이지 않는다.
또한, 관리자 도구를 보면 이미지 파일이 HTTP Status 404 오류가 난 것이 보인다.
이유가 뭘까?

---

이미지 파일을 눌러서 들어간 페이지이다. 웹 브라우저는 파일의 경로만 링크해주는 것이지 DB가 파일을 가지고 있는 것이 아니다.
때문에 Files/이미지 경로에 대한 컨트롤러를 만들어줘야한다.

---

BoardController에 추가된 메서드

@ResponseBody
@GetMapping("/images/{filename}") // images/DB에 저장된 파일 경로
public Resource downloadImage(@PathVariable String filename) throws MalformedURLException {
    // "file:/Users/../0d713e88-4723-4088-bb4b-be039b6f9b47.png"
    
    //경로에 있는 파일에 접근해서 파일을 스트림으로 반환을 함
    return new UrlResource("file:" + fileStore.getFullPath(filename));
    }

이전의 에러 사진을 보면 경로가 /images/DB에 저장된 파일 경로로 넘어온다. @GetMapping으로 경로를 받는다.

Resource
Spring의 Resource 인터페이스는 Resource에 대한 접근을 추상화하기 위한 인터페이스이다.

file: http: 이런식의 Prefix로 프로토콜을 명시해주고 해당 리소스의 위치를 알려주는 URL방식을 통해서 리소스의 위치를 알려주는 방식

Resource resource = new UrlResource("file:{절대경로}");

downloadImage 메서드는 Spring의 Resource 인터페이스를 사용해서 UrlResource로 이미지 파일을 읽어서 @Responsebody로 이미지 바이너리를 반환한다.

이제 다시 게시글을 등록하고 이미지 파일을 확인해보자.

---

이전과 동일하게 게시글을 작성해준다.

게시글 작성 후 게시글 상세 페이지를 보니 업로드한 이미지 파일이 정상적으로 보인다. 또한 관리자 도구를 보면 HTTP status가 400이 아닌 200으로 오는 것이 보인다.

---

여전히 부족한 점이 많다.

• 파일 다운로드 기능

• 업로드한 파일을 삭제하게 만들고 싶다.

• 첨부파일 업로드, 다운로드

등등 파일 업로드 부분을 제외하고 다른 부분에서도 수정해야 할 부분이 많다.

항상 부족함을 느끼지만 조금씩 성장하는 자신을 보니 뿌듯함도 같이 느낀다. 여전히 개발이 재밌다. 지금까지의 인생에서 했던 것 중 두번째로 재밌다. 첫번째는 여자친구랑 노는거.. 앞으로도 발전하는 내가 되길 바라며 오늘의 글은 여기서 끝내겠다!

---

글에서 부족한 부분이 많을 것 같습니다. 모든 지적을 환영합니다!!

더 자세한 코드는 깃허브를 참고해주세요!

깃허브: https://github.com/pp8817/ToyProjectBoard