스프링 쇼핑몰 만들기 #11. 상품 이미지 첨부 기능 구현

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

쇼핑몰이라면, 어떤 상품인지 대략적으로 알 수 있는 이미지가 있어야합니다. 다른 이미지 호스팅 서비스에 업로드한 뒤 불러오는 방법도 있지만, 스프링에서 이미지를 업로드하는 방법으로 하겠습니다.

업로드하는 이미지는 하나하나가 그렇게 큰 용량이 아니겠지만, 상품 목록에서 여러개의 상품이 보여질 경우, 모든 이미지의 총 용량이 크기 때문에 서비스하는 입장에서도 사용하는 입장에서도 데이터에 대한 부담이 생기게 됩니다.

그렇기 때문에 썸네일을 사용해야하며, 이미지를 첨부하여 저장할 시 원본 이미지를 저장하고, 저장하는 원본 이미지를 썸네일화 시켜서 별도로 저장하게됩니다.

먼저 tbl_goods 테이블에 썸네일을 저장할 컬럼이 없으니 추가합니다.

alter table tbl_goods add (gdsThumbImg varchar(200));

썸네일을 저장할 gdsTumbImg 컬럼을 생성했습니다.

테이블에 gdsThumbImg가 추가되었으니 GoodsVO에도 gdsThumbImg를 추가하고, getter/setter를 추가합니다.

register.jsp에 파일 등록용 인풋박스를 추가하고, 스크립트도 추가합니다.

<div class="inputArea">
 <label for="gdsImg">이미지</label>
 <input type="file" id="gdsImg" name="file" />
 <div class="select_img"><img src="" /></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>
</div>

스크립트는 파일이 등록되면 현재화면에서 어떤 이미지인지 볼 수 있도록 해주는 역할입니다.

이제 상품 등록 페이지에서 파일 선택 버튼을 눌러서 아무 이미지를 선택해보면

이렇게 선택한 이미지가 보입니다.

등록 버튼과 너무 가까이 있으니, 스타일(CSS)을 이용해 여백을 줍니다.

여백이 생기니 조금 낫네요.

register.jsp의 파일 등록용 인풋박스 근처에 코드를 추가합니다.

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

이 코드는 현재 프로젝트의 실제 경로를 표시합니다. 스프링 파일이 저장되는 워크스페이스와 다르므로, 파일을 저장할 때 실제 경로를 알아야합니다.

이렇게 실제 경로가 출력됩니다. 이 경로를 기준으로 파일을 저장하고 불러올 수 있습니다.

현재 프로젝트는 개발자의 컴퓨터에서 로컬로 실행됩니다. 이 프로젝트가 완성되어 서버에 업로드하여 실행된다면 저 경로가 아닌 새로운 경로를 확인해야합니다.

servlet-context.xml에 파일 저장에 필요한 코드를 추가합니다.

<!-- 업로드 패스 설정 --> 
<beans:bean class="java.lang.String" id="uploadPath">
 <beans:constructor-arg value="D:\kubg\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\kubg\resources" />
</beans:bean>

<!-- 일반 파일 업로드 경로 -->
<resources mapping="/imgUpload/**" location="/resources/imgUpload/" />

<beans:bean class="org.springframework.web.multipart.commons.CommonsMultipartResolver" id="multipartResolver">
 <beans:property name="maxUploadSize" value="10485760"/>
</beans:bean>

uploadPath는 업로드할 패스를 빈(bean)에 저장하여 의존주입하여 사용하는 역할입니다.

업로드 경로는 주소가 /imgUpload/** 로 접속될 때, 실제 처리는 /resources/imgUpload/ 로 처리합니다. 긴 문자를 짧게 줄일 수 있으며 실제 경로를 숨길 수 있습니다.

마지막은 업로드하는 파일의 크기를 제한하는 빈입니다. 10485660은 바이트로서 메가로 변환하면 10메가가 됩니다. 상품에 등록되는 이미지의 크기는 1~3메가 정도면 충분하니 필요에 따라 줄이거나 늘리면 됩니다.

썸네일과 파일 업로드에 관련된 라이브러리를 가져옵니다.

thumbnailator - 링크
commons-fileupload - 링크

pom.xml의 디펜던시(dependencies)내부에 추가합니다.

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>

<!-- https://mvnrepository.com/artifact/net.coobird/thumbnailator -->
<dependency>
    <groupId>net.coobird</groupId>
    <artifactId>thumbnailator</artifactId>
    <version>0.4.8</version>
</dependency>

파일을 저장하고, 파일이 저장될 폴더를 생성할 새로운 패키지를 생성합니다.

이렇게 패키지를 따로 만드는 이유는, 컨트롤러에서 처리하기에 기능적인 성격이 다르기 때문입니다.

패키지가 추가되었으니, root-context.xml에 패키지를 추가합니다.

추가한 패키지에 UploadFileUtils.java를 생성하고 코드를 추가합니다.

package com.kubg.utils;

import java.io.File;
import java.text.DecimalFormat;
import java.util.Calendar;
import java.util.UUID;

import org.springframework.util.FileCopyUtils;
import net.coobird.thumbnailator.Thumbnails;

public class UploadFileUtils {
  
 static final int THUMB_WIDTH = 300;
 static final int THUMB_HEIGHT = 300;
 
 public static String fileUpload(String uploadPath,
         String fileName,
         byte[] fileData, String ymdPath) throws Exception {

  UUID uid = UUID.randomUUID();
  
  String newFileName = uid + "_" + fileName;
  String imgPath = uploadPath + ymdPath;

  File target = new File(imgPath, newFileName);
  FileCopyUtils.copy(fileData, target);
  
  String thumbFileName = "s_" + newFileName;
  File image = new File(imgPath + File.separator + newFileName);

  File thumbnail = new File(imgPath + File.separator + "s" + File.separator + thumbFileName);

  if (image.exists()) {
   thumbnail.getParentFile().mkdirs();
   Thumbnails.of(image).size(THUMB_WIDTH, THUMB_HEIGHT).toFile(thumbnail);
  }
  return newFileName;
 }

 public static String calcPath(String uploadPath) {
  Calendar cal = Calendar.getInstance();
  String yearPath = File.separator + cal.get(Calendar.YEAR);
  String monthPath = yearPath + File.separator + new DecimalFormat("00").format(cal.get(Calendar.MONTH) + 1);
  String datePath = monthPath + File.separator + new DecimalFormat("00").format(cal.get(Calendar.DATE));

  makeDir(uploadPath, yearPath, monthPath, datePath);
  makeDir(uploadPath, yearPath, monthPath, datePath + "\\s");

  return datePath;
 }

 private static void makeDir(String uploadPath, String... paths) {

  if (new File(paths[paths.length - 1]).exists()) { return; }

  for (String path : paths) {
   File dirPath = new File(uploadPath + path);

   if (!dirPath.exists()) {
    dirPath.mkdir();
   }
  }
 }
}

이 코드는 폴더 생성과 파일 저장, 썸내일 생성의 작업을 합니다.

날짜(연/월/일)로 구성된 폴더를 생성하고, 같은 파일명이라도 중복되지 않도록 랜덤문자와 파일명을 조합한 뒤 생성된 폴더에 저장하며, 썸네일을 생성하여 별도의 폴더에 저장하도록 합니다.

컨트롤러에 servlet-context.xml에서 설정했던 uploadPath를 추가합니다.

상품 등록용 메서드에 코드를 추가합니다. 이때 주의할점은, 메서드의 매개변수에 MultipartFile file이 추가된 점입니다.

String imgUploadPath = uploadPath + File.separator + "imgUpload";
String ymdPath = UploadFileUtils.calcPath(imgUploadPath);
String fileName = null;

if(file != null) {
 fileName =  UploadFileUtils.fileUpload(imgUploadPath, file.getOriginalFilename(), file.getBytes(), ymdPath); 
} else {
 fileName = uploadPath + File.separator + "images" + File.separator + "none.png";
}

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

파일용 인풋박스에 등록된 파일의 정보를 가져오고, UploadFileUtils.java를 통해 폴더를 생성한 후 원본 파일과 썸네일을 저장한 뒤, 이 경로를 데이터 베이스에 전하기 위해 GoodsVO에 입력(set)합니다.

파일이 첨부되었는지 확인하는 조건문 file != null 을 그대로 사용하실 경우, 파일을 첨부하지 않으면 에러가 발생합니다. 이 에러의 해결 방법은 이 게시물에서 확인할 수 있습니다.

파일을 첨부하지 않았을 경우 미리 준비된 none.png의 출력이 안되는 에러가 있습니다. 이 에러의 해결 방법은 이 게시물에서 확인할 수 있습니다.

resources폴더에 imgUpload 폴더를 생성합니다. 이 폴더는 파일이 저장될 기본이 되는 폴더입니다.

이 폴더를 생성하더라도 실제 경로, 즉 uploadPath에 등록된 폴더에는 바로 생성되지 않으며 프로젝트를 한번 실행해야 폴더가 생성되는데, 어차피 상품을 등록하려면 프로젝트를 실행해야하니 신경쓰지 않아도 됩니다.

이제 매퍼의 상품 등록 쿼리에 이미지(gdsImg)와 썸네일(gdsThumbImg)를 추가합니다.

<!-- 상품 등록 -->
<insert id="register">
 insert into tbl_goods (gdsNum, gdsName, cateCode, gdsPrice, gdsStock, gdsDes,
       gdsImg, gdsThumbImg)
     values (tbl_goods_seq.nextval, #{gdsName}, #{cateCode}, #{gdsPrice}, #{gdsStock}, #{gdsDes},
        #{gdsImg}, #{gdsThumbImg})
</insert>

register.jsp의 폼(form)에 속성을 추가합니다.

enctype="multipart/form-data"

이제 이미지 첨부가 제대로되는지 확인하기 위해, 임의의 값을 넣어서 등록하겠습니다.

데이터 베이스에는 제대로 들어갔습니다.

실제 경로로 들어가보니 원본파일과 썸네일 모두 저장된걸 확인할 수 있습니다.

등록을 했으니 조회도 해야합니다. 매퍼에 있는 조회용 쿼리를 수정합니다.

<!-- 상품 조회 + 카테고리 조인-->
<select id="goodsView" resultType="com.kubg.domain.GoodsViewVO">
 select
     g.gdsNum, g.gdsName, g.cateCode, c.cateCodeRef, c.cateName, gdsPrice, gdsStock, gdsDes, gdsImg, gdsDate,
     g.gdsImg, g.gdsThumbImg
         from tbl_goods g
             inner join goods_category c
                 on g.cateCode = c.cateCode           
            where g.gdsNum = #{gdsNum}
</select>

상품 조회는 GoodsVO가 아니라, GoodsViewVO형태이므로 GoodsViewVO도 수정해야합니다.

GoodsViewVO에 썸네일을 추가하고, getter/setter를 추가합니다.

view.jsp에 코드를 추가하여 원본 이미지와 썸네일을 모두 넣어줍니다.

<div class="inputArea">
 <label for="gdsImg">이미지</label>
 <p>원본 이미지</p>
 <img src="${goods.gdsImg}" class="oriImg"/>
 
 <p>썸네일</p>
 <img src="${goods.gdsThumbImg}" class="thumbImg"/>
</div>

원본 이미지와 썸네일 모두 정상적으로 나오긴하는데, 원본 이미지가 너무 크네요.

클래스를 부여한 뒤

스타일을 적용하여 크기를 조절합니다.

이제 한눈에 볼 수 있네요.

지금보니까 view.jsp인데도 제목이 '상품 등록'으로 되어있습니다.

텍스트만 바꿔주면 끝.

이제 모두 정상적으로 보입니다.