프로필 사진 등록
1. pageUserId, principalId 를 비교해서 같을 때만 동작하기
내가 코스 유저라면 코스 유저일때만 프로필 변경이 되게 해줘야 한다
profile.jsp
<!--프로필사진 바꾸기 모달-->
<div class="modal-image" onclick="modalImage()">
<div class="modal">
<p>프로필 사진 바꾸기</p>
<button onclick="profileImageUpload(${dto.user.id},${principal.user.id})">사진 업로드</button>
<button onclick="closePopup('.modal-image')">취소</button>
</div>
</div>
JavaScript
복사
여기서 사진 업로드 함수 안에 파라매터를 담아서 보내준다.
profile.js에서 profileImageUpload 유저 프로필 사진 변경 함수를 수정해준다
// (3) 유저 프로파일 사진 변경 (완)
function profileImageUpload(pageUserId, principalId) {
console.log('pageUserId : ',pageUserId)
console.log('principalId : ',principalId)
}
JavaScript
복사
콘솔로 해당값이 찍히는지 우선 확인
cos 2번 유저로 로그인 후 프로필 ssar의 페이지로 진입 후 프로필 사진 변경을 누르면
로그는 잘 찍힌다
이제 아이디가 같을때만 변경되게 해줘야해서 조건을 추가해준다
// (3) 유저 프로파일 사진 변경 (완)
function profileImageUpload(pageUserId, principalId) {
console.log('pageUserId : ',pageUserId)
console.log('principalId : ',principalId)
if(pageUserId != principalId){
alert("프로필 사진을 수정할 수 없는 유저입니다.")
return;
}
$("#userProfileImageInput").click();
$("#userProfileImageInput").on("change", (e) => {
let f = e.target.files[0];
if (!f.type.match("image.*")) {
alert("이미지를 등록해야 합니다.");
return;
}
// 사진 전송 성공시 이미지 변경
let reader = new FileReader();
reader.onload = (e) => {
$("#userProfileImage").attr("src", e.target.result);
}
reader.readAsDataURL(f); // 이 코드 실행시 reader.onload 실행됨.
});
}
JavaScript
복사
이제 내페이지로 갈때도 본다
내 페이지는 파일 등록 화면도 잘뜬다
2. 사진을 클릭하면 input type = “file” 강제로 클릭 이벤트 발생시키기
3. 이미지를 put방식(ajax)으로 서버로 전송하기
-FormData 객체 이용
이제 서버에 이미지를 전송해야한다
form 태그에서 이미지 파일을 선택해서 값을 갖고 올 수 있는데
// (3) 유저 프로파일 사진 변경 (완)
function profileImageUpload(pageUserId, principalId) {
//console.log('pageUserId : ',pageUserId)
//console.log('principalId : ',principalId)
if(pageUserId != principalId){
alert("프로필 사진을 수정할 수 없는 유저입니다.")
return;
}
$("#userProfileImageInput").click();
$("#userProfileImageInput").on("change", (e) => {
let f = e.target.files[0];
if (!f.type.match("image.*")) {
alert("이미지를 등록해야 합니다.");
return;
}
// 서버에 이미지를 전송
let profileImageForm = $("#userProfileImageForm")[0];
console.log(profileImageForm);
// FormFata 객체를 이용하면 form 태그의 필드와 그 값을 나타내는 일련의 key/value 쌍을 담을 수 있다.
let formData = new FormData(profileImageForm);
$.ajax({
type: "put",
url : `/api/user/${principalId}/profileImageUrl`,
data: formData,
contentType : false, // 필수 : x-www-form-urlencoded로 파싱되는 것을 방지
processData : false, // 필수 :contenttype을 false로 줬을 때 QueryString 자동 설정됨. 해제
enctype: "multipart/form-data",
dataType: "json"
}).done(res=>{
// 사진 전송 성공시 이미지 변경
let reader = new FileReader();
reader.onload = (e) => {
$("#userProfileImage").attr("src", e.target.result);
}
reader.readAsDataURL(f); // 이 코드 실행시 reader.onload 실행됨.
}).fail(error=>{
console.log("오류", error)
});
});
}
JavaScript
복사
사진을 전송하는거라서 formData로 만든거다. 그외는 form태그의 데이터를 전송할때는 serialize를 사용하면 좋다(update.js 참고). 그것도 아니면 전부다 JSON형태로 전달받으면 좋다.
jsp를 사용해서 가장 기본적인걸로 이용하고 있기 때문에 JSON을 사용하지 않았다 (응답때만 사용)
이제 api를 만들면 된다!
UserApiController.java
@PutMapping("/api/user/{principalId}/profileImageUrl")
public ResponseEntity<?> profileImageUrlUpdate(@PathVariable int principalId, MultipartFile profileImageFile
,@AuthenticationPrincipal PrincipalDetails principalDetails){
User userEntity = userService.회원프로필사진변경(principalId, profileImageFile);
principalDetails.setUser(userEntity); //세션 변경
return new ResponseEntity<> (new CMRespDto<>(1, "프로필사진변경 성공", null), HttpStatus.OK);
}
Java
복사
UserService.java
@Value("${file.path}")
private String uploadFolder;
@Transactional
public User 회원프로필사진변경(int principalId, MultipartFile profileImageFile) {
UUID uuid = UUID.randomUUID(); //uuid
String imageFileName = uuid + "_"+ profileImageFile.getOriginalFilename(); //1.jpg
System.out.println("이미지 파일이름 :: " + imageFileName );
Path imageFilePath = Paths.get(uploadFolder + imageFileName);
//통신, I/O(하드디스크 기록하거나 읽을때) -> 예외가 발생할 수 있다. -> 예외처리해줘야한다.
try { //path 실제이미지파일 +바이트화
Files.write(imageFilePath, profileImageFile.getBytes());
} catch (Exception e) {
e.printStackTrace();
}
User userEntiry = userRepository.findById(principalId).orElseThrow(()-> {
throw new CustomException("유저를 찾을 수 없습니다. ");
});
userEntiry.setProfileImageUrl(imageFileName);
return userEntiry;
}// 더티체킹으로 업데이트 됨
Java
복사
ImageService.java에서 사진업로드 함수 참고해서 만든다.
ssar로 로그인해서 프로필 사진을 바꾼다
근데 새로고침하면은
돌아간다
profile.jsp에 적용을 안해서 그렇다.
이제 새로고침해도 계속 유지된다
cos의 프로필에서는 막히는것도 확인된다