[프로젝트] 인스타그램(5) - 프로필사진 수정하기
다른 페이지
https://sjj02055.github.io/projects/instagram_1/ https://sjj02055.github.io/projects/instagram_2/ https://sjj02055.github.io/projects/instagram_3/ https://sjj02055.github.io/projects/instagram_4/
실행 환경
Intellij, Oracle
사용 Tools
SpringBoot, Thymeleaf, Lombok, json-simple, JPA
인스타그램 - 프로필사진 수정
profile.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<div th:replace="fragments/header ::header"></div>
<title>Instagram</title>
<link rel="stylesheet" type="text/css" th:href="@{/css/uploadProfile.css}"/>
<!-- favicon -->
<link rel="icon" href="img/favicon.png">
<link rel="instagram-icon" href="img/favicon.png">
</head>
<body>
<div th:replace="fragments/navbar :: navbar"></div>
<div class="contents">
<div class="img">
<div class="title_image">
<div th:if="${member.profile_photo == null}">
<img class="img-profile pic" th:src="@{/images/noimage.png}" >
</div>
<div th:unless="${member.profile_photo == null}">
<img class="img-profile pic" th:src="@{/images/profile/{userId}/{photo}(userId=${member.getUserId},photo=${member.getProfile_photo})}">
</div>
</div>
</div>
<div>
<form class="upload" action="/member/update/profile_photo" th:field="form"
method="post" enctype="multipart/form-data" autocomplete="off">
<div><label for="ex_file">프로필 사진 바꾸기</label></div>
<div><input type="file" id="ex_file" name="filename" required />
<button type="submit" class="btn btn-default">업로드</button></div>
</form>
</div>
</div>
프로필사진을 바꾸는 경우는 데이터가 바뀌는 것이기 때문에 POST로 넘겨주었고 사진이 있으면 사진이 표시되고 없으면 noimage파일을 가져왔다.
MemberController.java
@Slf4j
@Controller
@RequestMapping("/member")
@RequiredArgsConstructor
public class MemberController {
@Value("${file.dir}")
private String fileDir;
private final MemberService memberService;
@PostMapping("/update/profile_photo")
public String insertPhoto(@RequestParam("filename") MultipartFile mFile, HttpServletRequest request) throws IOException{
HttpSession session = request.getSession(false);
Member member = (Member)session.getAttribute("loginMember");
String upload_path = fileDir + "profile\\" +member.getUserId() + "\\";
File file = new File(upload_path);
if(!file.exists()){
file.mkdirs();
}
try{
if(member.getProfile_photo()!= null){
File files = new File(upload_path + member.getProfile_photo());
files.delete();
}
mFile.transferTo(new File(upload_path + mFile.getOriginalFilename()));;
} catch(IllegalStateException | IOException e){
e.printStackTrace();
}
memberService.imgUpdate(member.getId(), mFile.getOriginalFilename());
Member tempMember = memberService.find(member.getId());
if(session!=null){
session.invalidate();
}
session = request.getSession();
session.setAttribute("loginMember",tempMember);
return "redirect:/member/update/profile";
}
}
프로필 사진은 다음과 같이 저장된다. Path의 fileDir은 application.properties에 따로 설정해놓아서 @Value로 값만 가져오면 된다.
MemberService.java
@Service
@Slf4j
@Transactional(readOnly = true)
@RequiredArgsConstructor
public class MemberService {
private final MemberRepository memberRepository;
@Transactional
public void imgUpdate(Long id, String profile_photo){
Member findMember = memberRepository.findOne(id);
findMember.setProfile_photo(profile_photo);
memberRepository.save(findMember);
}
public Member find(Long id){
Member findMember = memberRepository.findOne(id);
return findMember;
}
}
단순 조회인 경우에는 @Transactional을 빼고 수정이 들어가는 부분만 @Transactional을 써넣는다.
MemberRepository.java
@Repository
@RequiredArgsConstructor
@Slf4j
public class MemberRepository {
private final EntityManager em;
public void save(Member member){
em.persist(member);
}
public Member findOne(Long id){
return em.find(Member.class, id);
}
}
후기
프로필사진 수정은 끝! 의외로 서버쪽은 어려운 부분이 없었는데 타임리프를 사용하여 th:src 부분의 변수들을 어떻게 값을 넣어야 하는지 몰라서 이 부분이 제일 오래 걸렸던 것 같다.