파일업로드해서 고객 목록에 리스트로 올리기

cus에 있는 insert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<script type="text/javascript" src="/resources/js/jquery-3.6.0.js"></script>
<form:form modelAttribute="cusVO" method="post" action="/cus/insert"
	enctype="multipart/form-data">  
<ul class="list-group list-group-flush">
  <li class="list-group-item p-3">
    <div class="row">
      <div class="col-sm-12 col-md-6">        
          <strong class="text-muted d-block mb-2">고객 이름</strong>
          <div class="form-group">
            <form:input path="cusNm" class="form-control" />
            <font color="red" style="font-size:8pt;">
            	<form:errors path="cusNm" />
            </font>
          </div>
          <strong class="text-muted d-block mb-2">연락처</strong>
          <div class="form-group">
            <form:input path="pne" class="form-control" />
            <font color="red" style="font-size:8pt;">
            	<form:errors path="pne" />
            </font> 
          </div>
          <strong class="text-muted d-block mb-2">고객 주소</strong>
          <div class="form-row">
	          <div class="form-group col-md-7">
	            <form:input path="addr" class="form-control" />
	            <font color="red" style="font-size:8pt;">
	            	<form:errors path="addr" />
	            </font> 
	          </div>
	          <div class="form-group col-md-5">
	            	<button type="button" class="mb-2 btn btn-sm btn-info mr-1"
	            	onclick="openHomeSearch()">우편번호 검색</button>
	          </div>
          </div>
          <div class="form-group">
            <input type="text" class="form-control" name="addr1" id="addr1" placeholder="" />
          </div>
          <div class="form-group">
            <input type="text" class="form-control" name="addr2" id="addr2" placeholder="" />
          </div>
          <div class="form-group" style="float:right;">
			<button type="submit" class="mb-2 btn btn-sm btn-success mr-1">등록</button>
			<button type="reset" class="mb-2 btn btn-sm btn-danger mr-1">취소</button>
		  </div>
      </div>
      <div class="col-sm-12 col-md-6">
        <strong class="text-muted d-block mb-2">고객 이미지</strong>
        <div class="form-group">
        	<div class="imgs_wrap"></div>
        </div>
        <div class="form-group">
        	<input type="file" id="input_imgs" name="uploadFile" multiple />
        </div>
      </div>
    </div>
  </li>
</ul>
</form:form>
<script type="text/javascript">
	$(function(){
		$("#input_imgs").on("change",handleImgsFilesSelect);
	});
	//e : change이벤트를 받음
	function handleImgsFilesSelect(e){
		//이벤트가 일어난 파일객체의 이미지 파일들을 가져옴
		var files = e.target.files;
		//파일들을 배열로 만들어 관리
		var filesArr = Array.prototype.slice.call(files);
		//f : 각각의 파일 객체
		filesArr.forEach(function(f){
			if(!f.type.match("image.*")){
				alert("이미지만 가능합니다.");
				//업로드 종료(실패)
				return;
			}
			//각 이미지를 reader로 읽어들임
			var reader = new FileReader();
			reader.onload = function(e){
				var img_html = "<img src=\"" + e.target.result + "\" style='width:100px;' />";
				$(".imgs_wrap").append(img_html);
			}
			reader.readAsDataURL(f);
		});//end forEach
	}
</script>

2.SQL 작성하기

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="kr.or.ddit.cus.mapper.CusMapper">
	<!-- * selectKey?
	일련번호 처리
	마이바티스는 쿼리 실행 시 파라미터를 치환해줌 
	 -->
	 <!-- 고객 등록 -->
	<insert id="insert" parameterType="cusVO">
		<!-- ******* -->
		<selectKey order="BEFORE" keyProperty="cusNum" resultType="String">
			SELECT 'CUS' || LPAD(NVL(MAX(SUBSTR(CUS_NUM, 4)),0)+1,5,'0') FROM CUS
		</selectKey>
		INSERT INTO CUS(CUS_NUM,CUS_NM,ADDR,PNE)
		VALUES(#{cusNum},#{cusNm},#{addr}|| ' ' || #{addr1} || ' ' || #{addr2}, #{pne})
	</insert>
	
	<!-- attach_files 테이블로 첨부파일 insert -->
	<insert id="insertAttachFiles" parameterType="attachFilesVO">
		<foreach collection="list" item="item" index="index" 
			open="INSERT ALL " separator=" " close="SELECT * FROM DUAL">
			INTO ATTACH_FILES(ID,SEQ,UPLOAD_FILE_NAME,UPLOAD_FILE_SIZE,REGIST_DT,REGISTER_ID)
			VALUES(#{item.id},#{item.seq},#{item.uploadFileName},#{item.uploadFileSize},SYSDATE,#{item.registerId})
		</foreach>
	</insert>
</mapper>

3.MAPPER 만들기

package kr.or.ddit.cus.mapper;

import java.util.List;

import kr.or.ddit.cus.vo.AttachFilesVO;
import kr.or.ddit.cus.vo.CusVO;

public interface CusMapper {
	//고객 등록
	public int insert(CusVO cusVO);
	//고객의 파일들을 함께 등록
	public int insertAttachFiles(List<AttachFilesVO> attachFilesVO);
}

CusService

package kr.or.ddit.cus.service;

import kr.or.ddit.cus.vo.CusVO;

public interface CusService {
	//고객 등록
	public int insert(CusVO cusVO);
}

CusServiceImpl

package kr.or.ddit.cus.service.impl;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.file.Files;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import kr.or.ddit.cus.mapper.CusMapper;
import kr.or.ddit.cus.service.CusService;
import kr.or.ddit.cus.vo.AttachFilesVO;
import kr.or.ddit.cus.vo.CusVO;
import net.coobird.thumbnailator.Thumbnailator;

@Service
public class CusServiceImpl implements CusService {
	@Autowired
	CusMapper cusMapper;
	
	private static final Logger logger = 
			LoggerFactory.getLogger(CusServiceImpl.class);
	
	//고객 등록
	@Override
	public int insert(CusVO cusVO) {
		//1) cus 테이블로 insert
		int result = cusMapper.insert(cusVO);
		
		//업로드한 파일 객체들
		MultipartFile[] uploadFile = cusVO.getUploadFile();
		
		//파일 저장 경로 설정
		String uploadFolder = "D:\\A_TeachingMaterial\\6.JspSpring\\workspace\\dasuriProj\\src\\main\\webapp\\resources\\upload";
		
		//연/월/일 폴더 생성 시작-------
		File uploadPath = new File(uploadFolder, getFolder());
		logger.info("uploadPath : " + uploadPath);
		
		if(uploadPath.exists()==false) {//해당 경로가 없으면 생성해줘야함
			uploadPath.mkdirs();			
		}
		//연/월/일 폴더 생성 끝-------
		
		//업로드한 파일 객체들의 파일명과 크기 정보를 넣은 후 insert 할 리스트 객체
		List<AttachFilesVO> list = new ArrayList<AttachFilesVO>();
		
		int seq = 1;
		
		//이미지 3개를 업로드 한다면 3회 반복
		for(MultipartFile multipartFile : uploadFile) {
			logger.info("-----------");
			logger.info("파일명 : " + multipartFile.getOriginalFilename());
			logger.info("파일크기 : " + multipartFile.getSize());
			
			//각 파일 별로 세팅할 VO 
			AttachFilesVO vo = new AttachFilesVO();
			//1) 파일id(기본키데이터), 파일시퀀스번호,파일명과 크기를 세팅
			vo.setId(cusVO.getCusNum());	//고정값
			vo.setSeq(seq++);
			vo.setUploadFileSize(""+multipartFile.getSize());
			vo.setRegisterId("admin");//로그인 한 아디디로 교체해야 함
			//-----------UUID 파일명 처리 시작 ----------------------------
			//동일한 이름으로 업로드되면 기존 파일을 지우게 되므로 이를 방지하기 위함
			UUID uuid = UUID.randomUUID();
			
			String uploadFileName = uuid.toString() + "-" + multipartFile.getOriginalFilename();
			// c:\\upload\\gongu03.jpg으로 조립
			// 이렇게 업로드 하겠다라고 설계 uploadFolder -> uploadPath
			// /resources/upload/2022/02/21/asdfsadfsdafsda_test.jpg
			vo.setUploadFileName("/resources/upload/" + getFolder() + "/" + uploadFileName);
			
			File saveFile = new File(uploadPath,uploadFileName);
			//-----------UUID 파일명 처리 끝 ----------------------------
			
			try {
				//transferTo() : 물리적으로 파일 업로드가 됨
				multipartFile.transferTo(saveFile);
			
				//-------썸네일 처리 시작---------
				//이미지 파일인지 체킹
				if(checkImageType(saveFile)) {
					logger.info("이미지 파일? true");
					//uploadPath : 연/월/일이 포함된 경로
					//uploadFileName : UUID가 포함된 파일명
					FileOutputStream thumbnail = 
							new FileOutputStream(
									new File(uploadPath,"s_"+uploadFileName));
					Thumbnailator.createThumbnail(multipartFile.getInputStream(),
							thumbnail, 100, 100);
					thumbnail.close();
				}else {
					logger.info("이미지 파일? false");
				}
				//-------썸네일 처리 끝---------
				
				//파일 실제 명을 list에 담음
				list.add(vo);
			}catch(Exception e){
				logger.info(e.getMessage());
			}//end catch
		}//end for
		
//		logger.info("attachFilesVO : " + attachFilesVO.get(0).toString());
		
		//attach_files 테이블로 insert
		int filesResult = cusMapper.insertAttachFiles(list);
		
		return result;
	}
	
	//첨부파일을 보관하는 폴더를 연/월/일 계층 형태로 생성하기 위함
	private String getFolder() {
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
		Date date = new Date();
		String str = sdf.format(date);
		return str.replace("-", "/");
	}
	
	//특정한 파일이 이미지 타입인지 검사해주는 메소드
	private boolean checkImageType(File file) {
		try {
			//file.toPath() : 파일의 전체 경로
			logger.info("file.toPath() : " + file.toPath());
			String contentType = Files.probeContentType(file.toPath());
			logger.info("contentType : " + contentType);
			//contentType이 image로 시작하면 이미지 타입이므로 true를 리턴함
			return contentType.startsWith("image");
		}catch(IOException e) {
			e.printStackTrace();
		}
		return false;
	}

}

AttachFilesVO

package kr.or.ddit.cus.vo;

import java.util.Date;

import org.springframework.format.annotation.DateTimeFormat;

//첨부파일 자바빈 클래스
public class AttachFilesVO {
	private String id;
	private int seq;
	private String uploadFileName;
	private String uploadFileSize;
	@DateTimeFormat(pattern="yyyy-MM-dd")
	private Date registDt;
	private String registerId;
	@DateTimeFormat(pattern="yyyy-MM-dd")
	private Date updateDt;
	private String updaterId;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public int getSeq() {
		return seq;
	}
	public void setSeq(int seq) {
		this.seq = seq;
	}
	public String getUploadFileName() {
		return uploadFileName;
	}
	public void setUploadFileName(String uploadFileName) {
		this.uploadFileName = uploadFileName;
	}
	public String getUploadFileSize() {
		return uploadFileSize;
	}
	public void setUploadFileSize(String uploadFileSize) {
		this.uploadFileSize = uploadFileSize;
	}
	public Date getRegistDt() {
		return registDt;
	}
	public void setRegistDt(Date registDt) {
		this.registDt = registDt;
	}
	public String getRegisterId() {
		return registerId;
	}
	public void setRegisterId(String registerId) {
		this.registerId = registerId;
	}
	public Date getUpdateDt() {
		return updateDt;
	}
	public void setUpdateDt(Date updateDt) {
		this.updateDt = updateDt;
	}
	public String getUpdaterId() {
		return updaterId;
	}
	public void setUpdaterId(String updaterId) {
		this.updaterId = updaterId;
	}
	@Override
	public String toString() {
		return "AttachFilesVO [id=" + id + ", seq=" + seq + ", uploadFileName=" + uploadFileName + ", uploadFileSize="
				+ uploadFileSize + ", registDt=" + registDt + ", registerId=" + registerId + ", updateDt=" + updateDt
				+ ", updaterId=" + updaterId + "]";
	}
	
	
}

mybatisAlias

cus에 있는 list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>



    <div class="row">
              <div class="col">
                <div class="card card-small mb-4">
                  <div class="card-header border-bottom">
                    <h6 class="m-0">Active Users</h6>
                  </div>
                  <div class="card-body p-0 pb-3 text-center">
                    <table class="table mb-0">
                      <thead class="bg-light">
                        <tr>
                          <th scope="col" class="border-0">#</th>
                          <th scope="col" class="border-0">First Name</th>
                          <th scope="col" class="border-0">Last Name</th>
                          <th scope="col" class="border-0">Country</th>
                          <th scope="col" class="border-0">City</th>
                          <th scope="col" class="border-0">Phone</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>1</td>
                          <td>Ali</td>
                          <td>Kerry</td>
                          <td>Russian Federation</td>
                          <td>Gdańsk</td>
                          <td>107-0339</td>
                        </tr>
                        <tr>
                          <td>2</td>
                          <td>Clark</td>
                          <td>Angela</td>
                          <td>Estonia</td>
                          <td>Borghetto di Vara</td>
                          <td>1-660-850-1647</td>
                        </tr>
                        <tr>
                          <td>3</td>
                          <td>Jerry</td>
                          <td>Nathan</td>
                          <td>Cyprus</td>
                          <td>Braunau am Inn</td>
                          <td>214-4225</td>
                        </tr>
                        <tr>
                          <td>4</td>
                          <td>Colt</td>
                          <td>Angela</td>
                          <td>Liberia</td>
                          <td>Bad Hersfeld</td>
                          <td>1-848-473-7416</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              <a href="/cus/insert" class="mb-2 btn btn-sm btn-success mr-1" style="float:right;">고객등록</a>
              </div>
            </div>