스프링 쇼핑몰 만들기 #12. 상품 수정간 이미지 변경 기능 구현

스프링 쇼핑몰 만들기
 - 깃허브 링크

상품 등록시 이미지 첨부 기능이 구현되었는데, 상품을 수정할 때 이미지를 수정하는 기능은 아직 없습니다.

상품을 수정할 때 이미지를 변경 안하는 경우도 있고, 변경하는 경우도 있습니다. 이미지를 변경하지 않았을 땐 기존에 있는 이미지를 다시 데이터 베이스에 저장하거나, 이미지를 다루지 않는 쿼리문을 이용하면 되는데, 저는 기존에 있는 이미지를 다시 데이터 베이스에 저장하는 방법으로 하겠습니다.

register.jsp에 있는 이미지 관련 코드를 복사해서 modify.jsp로 붙여넣습니다. 그리고 기존 이미지를 출력하는 HTML코드와 원본 이미지와 썸네일을 저장하는 숨겨진(hidden) 인풋박스를 추가했습니다.

<div class="inputArea">

 <label for="gdsImg">이미지</label>

 <input type="file" id="gdsImg" name="file" />

 <div class="select_img">

  <img src="${goods.gdsImg}" />

  <input type="hidden" name="gdsImg" value="${goods.gdsImg}" />

  <input type="hidden" name="gdsThumbImg" value="${goods.gdsThumbImg}" /> 

 </div>

 

 <script>

  $("#gdsImg").change(function(){

   if(this.files && this.files[0]) {

    var reader = new FileReader;

    reader.onload = function(data) {

     $(".select_img img").attr("src", data.target.result).width(500);        

    }

    reader.readAsDataURL(this.files[0]);

   }

  });

 </script>

 <%=request.getRealPath("/") %>

</div>

또, modify.jsp의 폼(form)에 파일 관련된 속성을 부여합니다.

enctype="multipart/form-data"

이미지가 원본 크기 그대로 나오면 너무 클테니, 스타일(CSS)에 적당한 크기를 설정해줍니다.

매퍼의 쿼리에 이미지와 썸네일을 추가합니다.

<!-- 상품 수정 -->

<update id="goodsModify">

 update tbl_goods

     set

         gdsName = #{gdsName},

         cateCode = #{cateCode},

         gdsPrice = #{gdsPrice},

         gdsStock = #{gdsStock},

         gdsDes = #{gdsDes},

        

         gdsImg = #{gdsImg},

         gdsThumbImg = #{gdsThumbImg}

        

     where gdsNum = ${gdsNum}

</update>

컨트롤러 상품 수정 메서드의 매개변수와 내부 코드를 추가합니다.

// 상품 수정

@RequestMapping(value = "/goods/modify", method = RequestMethod.POST)

public String postGoodsModify(GoodsVO vo, MultipartFile file, HttpServletRequest req) throws Exception {

 logger.info("post goods modify");



 // 새로운 파일이 등록되었는지 확인

 if(file.getOriginalFilename() != null && file.getOriginalFilename() != "") {

  // 기존 파일을 삭제

  new File(uploadPath + req.getParameter("gdsImg")).delete();

  new File(uploadPath + req.getParameter("gdsThumbImg")).delete();

  

  // 새로 첨부한 파일을 등록

  String imgUploadPath = uploadPath + File.separator + "imgUpload";

  String ymdPath = UploadFileUtils.calcPath(imgUploadPath);

  String fileName = UploadFileUtils.fileUpload(imgUploadPath, file.getOriginalFilename(), file.getBytes(), ymdPath);

  

  vo.setGdsImg(File.separator + "imgUpload" + ymdPath + File.separator + fileName);

  vo.setGdsThumbImg(File.separator + "imgUpload" + ymdPath + File.separator + "s" + File.separator + "s_" + fileName);

  

 } else {  // 새로운 파일이 등록되지 않았다면

  // 기존 이미지를 그대로 사용

  vo.setGdsImg(req.getParameter("gdsImg"));

  vo.setGdsThumbImg(req.getParameter("gdsThumbImg"));

  

 }

 

 adminService.goodsModify(vo);

 

 return "redirect:/admin/index";

}

상품 등록 메서드와 거의 같은 코드인데, 새로운 이미지 파일이 등록되었는지 확인하는 과정이 추가되었습니다.

새로운 이미지가 등록되지 않았다면 기존 이미지를 그대로 사용하고, 새로운 이미지가 등록되었다면 기존 이미지를 삭제한 뒤 새로운 이미지를 등록합니다.

이제 상품 수정을 해봅니다. 일단 기존에 저장했던 이미지는 정상적으로 잘 나오네요.

이미지를 교체했습니다.

완료 버튼을 클릭하면 기존에 사용하던 이미지 파일은 삭제되고 새로운 이미지 파일이 등록되어야합니다.

상품 조회를 해보니 새로운 이미지가 잘 나옵니다.

기존에 등록했던 이미지 파일은 아예 삭제 되었습니다.

그리고 새로운 이미지 파일은 저장이 되어있습니다.

이번엔 이미지를 변경하지 않고 다른 내용만 변경해보겠습니다.

이미지는 그대로 유지되었으며 내용도 잘 변경되었습니다.