[스프링] 회원 프로필사진 수정 , 등록

이번에 구현할 것은 회원 프로필사진 등록, 및 수정이다.

 

미뤄왔던 회원 프로필 사진을 드디어 해결했다.

 

 

먼저 , 게시판에 사진 등 첨부파일을 등록할 때에는 파일테이블에

 

게시글PR 이나 파일의 오리지널 NAME 등, 몇가지의 컬럼이 들어가는데,

 

 

회원 프로필 사진은 회원테이블에 오직 로컬에 저장 된 파일명 (저장NAME) 만 저장하면 된다.

 

그래서 기존에 List<Map>> 으로 넣어주던 방식에서 String으로 리턴타입을 지정해 , 간단하게 구현했다.

 

 

[스프링]게시판 첨부파일 업로드 구현 설명(insert) (1) :: 간편 웹프로그래밍 (tistory.com)

[스프링]게시판 첨부파일 업로드 구현 설명(insert) (1)

 

기존에 FileUtil.java 파일을 생성해서 코드를 간결하게 했다.

 

해당 파일의 설명은 위 글에 작성해놓았다.

 

---

infoView.jsp ( 회원정보 수정 뷰)

  <img src="/image/${login.memberImg}" style=" max-width: 50%;  height: auto;"> <br />	  
           <div class="card">           
              <form action="/member/updateImg" method="post" enctype="multipart/form-data">
                <input type="file" name="file">
                <input type="hidden" name="memberId" id="memberId" value="${login.memberId}">
               <button type="submit" class="btn btn-primary">사진변경</button>
             </form>

일단 회원 프로필을 바꾸는데 필요한 파라미터는 memberId와(회원PR)   file이다.

form태그를 이용해서 두개의 파라미터를 컨트롤러로 보냈다.

 

---

Controller

@RequestMapping(value="/updateImg", method=RequestMethod.POST)
	public String updateImg(MultipartHttpServletRequest mpRequest, HttpSession session , String memberId)throws Exception {
		
		String memberImg = fileUtil.updateImg(mpRequest); 

		MemberVO memberVO = (MemberVO) session.getAttribute("login");
		
		memberService.updateImg(memberImg, memberId);
		
		memberVO.setMemberImg(memberImg);
		session.setAttribute("login", memberVO);
		
				
		return "/member/infoView";
	}

multipart 라이브러리를 통해 파일을 매개변수로 받고, 현재 회원의 memberId를 받는다. 

 

업로드 된 파일의 이름을 String memberImg에 가져온다.

 

memberImg를 update로직에 넣어서 DB에 입력해주고 , 현재 세션값에 새로운 Img값을 넣어서 set 시켜준다.

---

fileUtil.java

	public String updateImg(
			MultipartHttpServletRequest mpRequest) throws Exception{
		
		
		Iterator<String> iterator = mpRequest.getFileNames();
		
		MultipartFile multipartFile = null;
		String originalFileName = null;
		String originalFileExtension = null;
		String storedFileName = null;
		
		String memberImg = "";
		
		
		File file = new File(filePath);
		if(file.exists() == false) {
			file.mkdirs();
		}
		
		while(iterator.hasNext()) {
			multipartFile = mpRequest.getFile(iterator.next());
			if(multipartFile.isEmpty() == false) {
				originalFileName = multipartFile.getOriginalFilename();
				originalFileExtension = originalFileName.substring(originalFileName.lastIndexOf("."));
				storedFileName = getRandomString() + originalFileExtension;
				file = new File(filePath + storedFileName);
				multipartFile.transferTo(file);
				memberImg = storedFileName;
			}
		}
		return memberImg;
	}

multipart 라이브러리의 함수들을 통해 , 파일의 값을 가져오고 지정된 로컬에 저장,

저장된이름을 memberImg에 담았다.

---

Mapper.xml

<update id="updateImg">
update MP_MEMBER set MEMBER_IMG = #{memberImg} where Member_ID = #{memberId}
</update>

 

두개의 파라미터를 dao에서 Map으로 받아서 mapper로 보내 update 했다. (

 

(dao와 service에는 파라미터를 옮겨줄 뿐이라 생략)

 

---

이제 회원테이블에 사진 수정이 가능하게 되었다.

 

회원테이블을 select하는 쿼리들에 memberImg 컬럼도 넣어서, 프로필사진을 구현했다.

 

ex)

<a href="/board/mypageView?select=log&memberId=${list.memberVO.memberId}" style="color: black">
	<img src="/image/${list.memberVO.memberImg}" style=" max-width: 25px;  height: 25px;"> 
		<c:out value="${list.memberVO.memberName}" /> </a>

---

 

결과

 

01234

슬라이드쇼 5장

 

1. 수정뷰의 프로필사진 변경부분
2. 파일 선택 후 사진변경 버튼을 눌렀을 때
3. 목록
4. 회원프로필
5. 댓글에도 적용 완료

 

---

 

기본 프로필 사진도 로컬에 사진을 올려놓고 회원가입시 default값으로 img에 올려놓은 사진 값을 주면 되지만,

 

배포 할 때 여차피 로컬위치를 바꿀거라서 굳이 설정하지 않았다.

 

• 마이페이지
• 프로필사진
• 관리자페이지
• 채팅 , 알림기능 ( 소켓이용 )
• 오픈 API를 이용한 구글로그인 , 지도 이용