Tomcat + JSP + Spring 서버에 파일 업로드

zihoo·2021년 8월 3일
0

Spring

목록 보기
2/3

Form 형식으로 파일을 서버에 업로드하는 방법에 대해 알아보자!

💻전체적인 흐름

JSP 파일에서 사용자에게 파일을 받는다
➡︎ Controller로 파일을 전송한다
➡︎ Controller에서 Service / DAO 파일을 통해 mapper로 접근한다
➡︎ mapper에서 insert 쿼리를 실행한다

✔️JSP 파일

  • 사용자로부터 파일을 입력 받는 부분
    • input 태그를 사용하여 file을 받을 수 있다.
    • 사용 예시
<input class="form-control file" type="file" name="file" id="file" multiple>
  • Controller로 파일을 전송하는 부분
    • Form 형식으로 파일을 전송
    • 사용 예시
<form method="POST" enctype="multipart/form-data" id="uploadForm" action="<%=request.getContextPath()%>/communityInfo/write/create">
  <input class="form-control file" type="file" name="file" id="file" multiple>  
  <button class="btn btn-primary submit-btn bottom-btn" type="submit">
</form>
  • 예시 해석
    • method="POST"
      POST 형식으로 데이터를 전송
    • enctype="multipart/form-data"
      method 속성값이 “post”인 경우에만 사용 가능
      모든 문자를 인코딩하지 않음을 명시
      파일이나 이미지를 서버로 전송할 때 주로 사용
    • id="uploadForm"
      개발자가 붙여준 id
    • action="<%=request.getContextPath()%>/communityInfo/write/create">
      전송했을때 데이터를 보낼 페이지
    • type="submit"
      버튼에 submit type을 지정해 form을 전송

✔️Controller 파일

@RequestMapping(value = "/communityInfo/write/create", method = RequestMethod.POST)
@ResponseBody
public ModelAndView createCommunityInfo(ModelAndView mv, MultipartHttpServletRequest request, MultipartFile file) {
	FileDTO infoFile = new FileDTO();
	MultipartFile newfile = request.getFile("file");
	String originalUrl = newfile.getOriginalFilename();
 
 	infoFile.setCommunityInfoId(recentId);
	infoFile.setOriginalUrl(originalUrl);
		
	communityInfoService.creatCommunityInfoFile(infoFile);
 		
 	String saveDir = request.getSession().getServletContext().getRealPath("/resources/upload/file");

	File dir = new File(saveDir);
	if (!dir.exists()) {
		dir.mkdirs();
	}
 	if (!newfile.isEmpty()) {
		String ext = originalUrl.substring(originalUrl.lastIndexOf("."));
		try {
			newfile.transferTo(new File(saveDir + "/" + originalUrl));
		} catch (IllegalStateException | IOException e) {
			e.printStackTrace();
		}
	}
	mv.setViewName("redirect:/communityInfo");

	return mv;
 }
  • 사용예시
    1. Form에서 "/communityInfo/write/create" 경로로 보냈기 때문에 POST method로 데이터를 받는다.
    2. FileDTO 인스턴스를 만들어 데이터를 저장할 공간을 만든다.
    3. MultipartHttpServletRequest을 통해 데이터를 전달받는다.
    4. 전달받은 파일을 MultipartFile 형태로 저장한다.
    5. 전달받은 파일의 이름을 .getOriginalFilename()을 통해 String 형태로 저장한다.
    6. 전달받은 데이터를 setter를 이용해 FileDTO에 저장한다.
    7. 데이터를 담은 FileDTO를 Service에 넘겨 mapper의 xml로 전달해 insert 쿼리를 실행한다.
    8. 파일을 저장할 경로를 지정하고 파일이 비어있지 않은 이상 지정된 경로에 파일을 저장한다.
    9. setViewName를 통해 로드할 페이지를 지정한다.

✔️Service / DAO 파일

 // CommunityInfoServiceImpl 
 
@Service
public class CommunityInfoServiceImpl implements CommunityInfoService {

	@Autowired
	CommunityInfoDAO communityInfoDAO;
    
    	@Override
	public int creatCommunityInfoFile(FileDTO communityInfoFile) {

		return communityInfoDAO.creatCommunityInfoFile(communityInfoFile);
		
	}
  }
  
  
 // CommunityInfoDAOImpl 

@Repository
public class CommunityInfoDAOImpl implements CommunityInfoDAO {

	@Autowired
	private SqlSessionTemplate sqlSession;
	
	private String namespace = "CommunityInfo";
    
    	@Override
	public int creatCommunityInfoFile(FileDTO communityInfoFile) {
		
		sqlSession.insert(namespace+".creatCommunityInfoFile", communityInfoFile);

		return 0;
	}
 }

✔️Mapper 파일

<?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="CommunityInfo">

  <!-- 커뮤니티 공지사항 파일 업로드 쿼리 -->
  <insert id="creatCommunityInfoFile"
      parameterType="com.walab.hgu.DTO.FileDTO">
      INSERT INTO hguclub.communityInfoFile (communityInfoId, originalUrl)
      VALUES (#{communityInfoId}, #{originalUrl})
  </insert>
  
</mapper>
profile
(๑・̑◡・̑๑)

0개의 댓글