IT 세상에서 살아남기

SPRING(16) 회원 관리 기능 구현_프로필 사진 등록 본문

spring

SPRING(16) 회원 관리 기능 구현_프로필 사진 등록

Alan__kang__morlang 2022. 2. 1. 10:28
반응형

이번 시간에는 프로필 사진을 등록하는 기능을 구현 해보겠습니다. 

 

1. 일단 프로필 사진을 등록하기 위해서는 파일 입출력을 위한 디펜던시를 추가해야 합니다. 

 

		<!-- /commons-fileupload -->
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.3</version>
		</dependency>
		<!-- /commons-io -->
		<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.4</version>
		</dependency>

상단의 코드를 porm.xml에 추가를 해줍니다. 

 

2. 전 시간에 했었던 회원가입 기능이 성공했다면 프로필 사진을 등록하는 기능으로 경로를 보내주는데 profilePhoto.jsp 경로를 이곳을 잡아줍니다. 

 

https://qkqtodn1.tistory.com/61 이 페이지를 참고 해서 보시면 됩니다. 

 

회원가입이 성공하면 return 으로 profilePhoto.jsp 보내줌

 

3. 그리고 profilePhoto.jsp의  jsp페이지 form을 만들어 줍니다. 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>프로필 사진 페이지입니다.</h1>
	<form action="${contextPath }/user/profileUpload" enctype="multipart/form-data" method="post">
		<input type="text" name="id" placeholder="프로필 설정할 아이디를 입력하세요"> <br>
		<input type="file" name="imageFileName"> <br>
		<input type="submit" value="프로필 사진 등록"> 
	</form>

<a href="${contextPath }/loginPopup">프로필 사진을 등록하지 않겠습니다.</a>
</body>
</html>

프로필 사진을 등록하지 않는다면 그냥 loginPopup으로 로그인을 하게 만들어주었고 값은 'nan'으로 주었고 

만약 등록한다면 profileUpload로 post타입으로 imageFile을 넘겨 주기 때문에 enctyped="multipart/form-data"를 줘서 값을 넘겨줍니다.

 

 

4. Controller에서 post타입으로 값을 받아옵니다. 

 

@PostMapping("user/profileUpload")
	public String profileUpload(MultipartHttpServletRequest mul) {
		String id = mul.getParameter("id");
		
		System.out.println("controller : " + mul.getParameter("id"));
		MultipartFile file = mul.getFile("imageFileName");
		System.out.println("controller : " + file.getOriginalFilename()); 
		//상단의 코드는 디버깅을 위한 작업입니다. 
		
	
		ms.profileUpload(mul);
		
		return "redirect:/loginPopup";
	}

 

파일입출력을 위한 MultipartHttpServletRequest 객체를 매개변수로 사용해 값을 받아 옵니다. 

값이 잘 받아오는지를 확인하는 작업을 해주었고 ms 라는 MemberService를 받아오는 변수에 profileUpload의 메소드를 선언해주고 mul값을 넘겨 줍니다. 

 

5. MemberService.interface 에서 값을 받아오고 MemberService.class 에 @Override 를 해줍니다.

 

-MemberService.interface 

MemberService.interface

물리적 저장소 저장을 위한 static 으로 경로를 잡아주었고 interface로 메소드를 선언해줍니다. 

 

 

-MembeServiceImpl.class

@Override
	public void profileUpload(MultipartHttpServletRequest mul) {
		System.out.println(mul.getParameter("id"));
		MultipartFile file = mul.getFile("imageFileName");
		System.out.println(file.getOriginalFilename());
		SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss-");
		Calendar calendar = Calendar.getInstance();
	
		MemberDTO dto = new MemberDTO();
		dto.setId(mul.getParameter("id"));
		
		if(file.getSize() != 0) {
			String sysFileName = format.format(calendar.getTime());
			sysFileName += file.getOriginalFilename();
			
			File saveFile = new File(FROFILE + "/" + sysFileName);
			
			dto.setImageFileName(sysFileName);
			
			try {
				file.transferTo(saveFile);
			} catch (Exception e) {
				e.printStackTrace();
			}
			
		}else {
			dto.setImageFileName("nan");
		}
	
 		
		mapper.profileUpload(dto);
	}

SimpleDataFormet으로 시스템의 날짜를 자신이 원하는 날짜로 바꾸기 위한 틀이고 

Calendar로 시스템의 날짜를 가져온 후에 

MultipartFile 로 mul로 받아온 imageFileName을 가져온후에 

if문을 사용해 file.size가 있다면 파일이름을 현팡재날짜와 합쳐주는 작업을 해주는데 중복저장이 되면 시간을 가져와서 

파일을 가져오기 위한 작업이라고 생각하면 됩니다.

그리고 saveFile이라는 변수는 파일을 물리적 저장소에 저장시키기 위한 경로라고 생각하면 되는데 

저장시킬 경로와 / 파일이름 이런식으로 경로를 주고 file의 transferTo의 메소드를 사용해서 물리적으로 저장시키고 

dto.setImageFileName을 이용해 데이터베이스에 저장시켜줍니다. 이때 saveFile이 아니라 sysFileName을 해주어야 되는데 파일의 이름을 데이터베이스에 저장시켜주어야 합니다. 

그리고 마지막으로 mapper를 이용해 데이터베이스에 저장시킬 메소드를 선언합니다. 

 

6. MemberMapper.interface 

 

xml에 사용될 메소드를 선언 해서 값을 넘겨줄 준비를 합니다. 

 

7. memberMapper.xml 에 데이터베이스의 값을 넣어주는 것이 아니라 회원가입을 해서 아이디의 값의 값을 update를 해주는 형식으로 구현했습니다. 

 

-memberMapper.xml

<update id="profileUpload">
		update userTable set image_file_name=#{imageFileName} where id=#{id}
	</update>

 

이렇게 사전에 프로필 사진의 업데이트를 관리하면 사용자가 마이페이지에서 가장 많이 사용하는 값은 프로필 사진관련한 것이라고 생각했기 때문에 따로 코드를 따와서 sql문의 update를 사용했습니다. 

 

코드구현은 여기까지 한다면 문제 없이 잘 동작할 것입니다.  화면에서는 이렇게 동작합니다. 

1. 먼저 회원가입을 진행하고 나면 

 

2. 프로필 사진을 등록할 것인지 아닌지 등록한다면 파일을 선택하게 되는데 

 

 

3. 정상적으로 데이터베이스와 물리적 저장소에 저장된 것을 알 수 있습니다. 

 

데이터 베이스 저장 성공
물리적 저장소 저장 성공

 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'spring' 카테고리의 다른 글

SPRING(17) 회원 관리 기능 구현_아이디 중복 체크 기능  (0) 2022.02.01
SPRING(15) 회원 관리 기능 구현_회원가입 기능  (0) 2022.01.26
SPRING(14) 로그인 팝업창으로 만들기  (0) 2022.01.26
SPRING(13) 회원 관리 기능 구현_3  (0) 2022.01.25
SPRING(12) 회원 관리 기능 구현_2(데이터베이스 설계)  (0) 2022.01.25
'spring' Related Articles more