[Spring Boot] 첨부 이미지 보여주기

파일 첨부를 통해 이미지를 서버에 저장까지 진행했으니, 그 이미지를 게시글에 보여주기 작업을 진행하고 기록한다.

지난 글 : https://black-mint.tistory.com/62

[Spring Boot] 파일 첨부 (게시글 이미지 첨부)

 

게시글을 조회하면 content(내용) 밑에 등록했던 이미지를 행으로 나열할 것이다.

---

1. 구현 로직

• 처음 지식이 전무한 상태에서 생각한 방법이 ajax 통신을 통해 이미지정보를 DB에서 List형태로 받아 이미지 경로를 View에 띄워주려했다. (실패)
• 여러 정보를 탐색했지만 여러 이미지를 리스트 형태로 리턴하는 방법이 없었다. (1번 실패 이유)
• img태그의 src에 이미지 리턴 주소를 넣어준다면..? (선택!)
• 최종 로직
  1.  클라이언트에서 게시판ID(PK)를 서버로 전달
  2.  서버에서 해당 게시글에 등록된 첨부파일(이미지) 데이터를 반환
  3.  클라이언트는 서버로부터 받은 데이터를 이용해 img태그의 src속성에 이미지 api 주소를 저장하고 div태그 자식으로 추가!
  4. View에 이미지 보여주기

2. Controller

@RestController
public class FileController {

    @Autowired
    private FileService fileService;

    // 게시글에 첨부된 이미지 ID값 리스트로 반환
    @GetMapping(value = "/images/{boardId}")
    public List<FileDTO> getFileList(@PathVariable(value = "boardId") Long boardId) throws SQLException {
        List<FileDTO> files = fileService.getFileList(boardId);
        return files;
    }

    // 이미지 리턴
    @GetMapping(value = "/image/{imageId}", produces = MediaType.IMAGE_JPEG_VALUE)
    public ResponseEntity<Resource> getViewImage(@PathVariable(value = "imageId") Long imageId) throws SQLException {
        FileDTO fileDTO = fileService.getFile(imageId);
        Resource resource = new FileSystemResource(fileDTO.getPath());
        return new ResponseEntity<Resource>(resource, HttpStatus.OK);
    }
}

• getFileList를 통해 게시글에 등록된 첨부파일(이미지)의 정보를 리턴받는다 (최종로직의 1, 2번에 해당)
• getViewImage를 통해 이미지를 리턴 (최종로직의 3번의 일부에 해당)

3. Service

@Service
public class FileService {

    private final FileMapper fileRepository;

    @Autowired
    public FileService(FileMapper fileMapper) {
        this.fileRepository = fileMapper;
    }

    // BoardId로 File리스트 반환
    public List<FileDTO> getFileList(Long boardId) throws SQLException {
        List<FileDTO> fileList = fileRepository.selectByBoardId(boardId);
        return fileList;
    }

    // ImageID로 FileDTO 반환
    public FileDTO getFile(Long id) throws SQLException {
        FileDTO fileDTO = fileRepository.selectByFileId(id);
        return fileDTO;
    }
}

• getFileList : FileDTO 타입의 List를 반환
• getFile : 컨트롤러의 getViewImage에서 단일 이미지를 다루기 때문에 불러오고자 하는 이미지 데이터를 DB에서 조회하여 fileDTO객체 하나만을 리턴

4. View (상세 글 페이지 일부)

							.
							.
							.
                    <h2>제목 : <span th:text="${board.title}">글 제목</span></h2>
                </div>
                <hr />
                <div class="mb-3">
                    <textarea type="text" class="form-control" th:text="${board.content}" rows="13"
                        style="background-color: white;" readonly>내용</textarea>
                </div>

                <div id="image">
                </div>

                <!-- Comment -->
                <h4>댓글<span>(<span id="count"></span>)</span></h4>
                <div class="mb-5">
                    <div id="comment">
                    </div>
							.
							.
							.

• 위는 글 제목, 내용을 나타내고 아래는 이전에 다뤘던 댓글이 나타나는 곳!
• <div id="image"></div> 에 자바스크립트를 통해 등록된 이미지를 추가 할 예정

5. Script (이미지 로드 부분)

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script th:inline="javascript">
        $(document).ready(function () {
            getImgId() // 이미지 불러오기
            getComments() // 댓글 불러오기
        })

        // 해당 게시글에 등록된 이미지 ID를 리스트로 불러오기
        function getImgId() {
            var boardId = $('input[name=boardId]').val()
            var url = '/images/' + boardId
            var imgId = []

            $.ajax({
                type: 'GET',
                url: url,
                success: function (response) {
                    var idx = 0;

                    $.each(response, function (key, value) {
                        imgId[idx] = value.id
                        idx++
                    })
                    getImg(imgId)
                },
                error: function (response) {
                    console.log("이미지 ID 로딩 실패")
                }
            })
        }

        // 불러온 이미지 ID로 이미지 src요청
        function getImg(imgId) {
            var boardId = $('input[name=boardId]').val()
            var url = ''
            var a = ''

            for (var i = 0; i < imgId.length; i++) {
                url = '/image/' + imgId[i]
                a += '<img class="img-thumbnail mb-3 me-3" style="width: 200px; height: 200px" src="' + url + '" onclick="window.open(this.src)"/>'
            }
            $('#image').html(a)
        }
    </script>

페이지 로드가 완료되면 getImgId() 함수 실행

• ajax 통신을 통해 서버의 getFileList를 실행
• imgId 배열을 생성하고, ajax 통신에 성공하면 List의 FileDTO getId값을 배열에 초기화
• value.id : 서버에서의 FileDTO.getId

getImgId()함수를 통해 배열에 이미지 id값이 모두 저장됐으면 getImg함수를 실행

• img 태그를 생성하고 src에 서버의 getViewImage를 호출하는 url 값을 넣어준다.
• 최종적으로 $('#image').html(a)를 통해 image태그 자식으로 img태그를 추가한다.

6. 결과

추가된 이미지

이 전 글에서 테스트로 추가한 이미지들이 보여진다. (귀엽다)

 

 

 

 

 

 

 

* [스프링에서 이미지를 다루는 방법] 참고 : https://www.baeldung.com/spring-mvc-image-media-data