[Spring] S3 이용 - 이미지 등록, 조회 하기

1. 이미지 등록

우선 이미지 등록하는 방법에 대해서 알아볼 것이다.

 

폼 태그에 enctype을 꼭 작성해주어야 한다.

이후, 이미지 파일을 선택하기 위한 input 필드도 추가해 주어야 한다.

 

이렇게 이미지 업로드 버튼이 생긴 것을 확인할 수 있다.

 

- service로 이동.

    @Secured("ROLE_OWNER")
    @PostMapping("/sail/menu")//새로운 메뉴를 추가해주는 api. 따라서 postmapping 이용.
    public String createMenu(@ModelAttribute MenuRequestDto requestDto,
                             @RequestParam(value = "image") MultipartFile images,
                             @AuthenticationPrincipal UserDetailsImpl userDetails) {
        try {
            Long menuId = menuService.createMenu(requestDto, userDetails);
            imageService.saveMenuImage(images, menuId, userDetails);
        } catch (IOException e) {
            logger.error("파일 업로드 중 오류 발생", e);

        }
        return "redirect:/sail/listmenu";
    }

이후 @RequestParam(value = "image" ) 를 통해서 MultipartFile images 를 통해서 이미지를 받아와 준다.

imageService.saveMenuImage(images, menuId, userDetails) 를 통해서, 저장해주는 단계로 넘어간다.

 

 

빨간색으로 색을 칠한 부분이 주된 부분이다.

s3uploager.upload를 통해서, 이미지를 업로드 하고, url을 받아온다.

받아온 url을 imagePhoto 의 imageUrl column 부분에 저장해주면 된다.

 

2. 이미지 출력

다음으로 이미지를 사이트에 출력하는 부분을 알아볼 것이다.

    @Secured("ROLE_OWNER")
    @GetMapping("/sail/listmenu") // owner만 접슨할 수 있도록 authorization해야함.
    public String listMenu(Model model, @AuthenticationPrincipal UserDetailsImpl userDetails) {
        List<ImagePhoto> images = imageService.listImage(userDetails);
        List<Menu> menus = menuService.listMenu(userDetails);
        model.addAttribute("menus", menus);
        model.addAttribute("owner", true); // *** 이 부분 빼던가 해야함.
        model.addAttribute("images", images);
        return "menu/listMenu";
    }

model.addAttribute("images", images)를 통해서 위에서 찾아온, 이미지 리스트를 model 로 넘겨준다. - 해당 코드에서는 storeID가 동일한 이미지들을 불러왔다.

 

<main>
    <img th:src="@{/images/logo.png}" class="logo" />
    <div class="card-container">
        <div th:each="menu, menuStat : ${menus}" class="card" th:data-menu-id="${menu.menuId}">
            <h3 th:text="${menu.menuName}">Menu Name</h3>
            <p th:text="${menu.introduce}">Introduction</p>
            <p><span>Price: $</span><span th:text="${menu.price}"></span></p>
            <p><span>Category: </span><span th:text="${menu.menuCategory}"></span></p>

            <!-- 이미지 출력 부분 -->
            <div th:each="image : ${images}">
                <img th:if="${image.menu.menuId == menu.menuId}" th:src="@{${image.imageUrl}}" alt="Menu Image"/>
            </div>

            <div class="card-actions" th:if="${owner}">
                <a th:href="@{/sail/menu/{id}(id=${menu.menuId})}">✏️</a>
                <a href="#" th:onclick="'javascript:deleteMenu(' + ${menu.menuId} + ');'">🗑️</a>

            </div>
        </div>
    </div>

    <div>
        <a href="/sail/menu" class="add-menu-button">메뉴 추가하기</a>
    </div>
</main>

 

이후 이미지 출력 부분 html을 확인해보면 된다.

이 코드의 경우 이미지의 메뉴의 메뉴 아이디가 현재 메뉴의 아이디와 동일하다면 이미지를 출력해 주었다.

 

 

이렇게 이미지가 출력됨을 확인할 수 있다.