용량 큰 사진 업로드시 오류 해결, 파일 변경시 자동으로 사진이 업로드 되게

이번엔 프로필 사진을 추가,변경할수 있게 기능을 추가하였다.

 

그러면서 좀 여기에 메모할 것들을 몇개 갖고 와봤다. 

 

 

일단 사진 업로드시 

이런 오류가 뜨거나 아니면 서버에서 오류가 뜰수 도 있는데

나는 js 에서 file 을 전송해가지고 콘솔창에 이런 오류가 떴다.

사실 이건 지난 프로젝트에서도 본 거여서 

당황하지 않고 바로 

아래 코드를

spring:
  servlet:
    multipart:
      maxFileSize: 10MB
      maxRequestSize: 100MB

 

application.yml 에 추가만 하면 바로 해결 되는 문제 이다.

주의 할점은 띄어쓰기 , 문단 만 잘 맞춰주면 된다. 

그리고  좀 더 유저에게 사용하기 쉽게 

 

여기서 파일 선택을 누르고 

 

이 화면이 뜨고 바로 사진을 선택하고 열기를 누르면 

 

이렇게 바로 사진이 바꾸게 하였다. 

 

방법은 간단하게 , js 로 파일이 변경되는게 감지 된다면 그 파일을 서버로 전송하게 하는 함수를 쓰고

그 함수가 성공시에  새로운 imgUrl 을 받아오는  서버 api 호출하여 다시 프로필 사진을 비동기로 업데이트

해주면  된다.  이러면 새로고침이 필요없이 바로바로 사진이 변하게 된다. 

 

 

<script>
    function uploadFile(uri, file) {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    var formData = new FormData();
    formData.append('file', file);

    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open('PATCH', uri, true);
        xhr.setRequestHeader(header, token);
        xhr.onload = function() {
            if (xhr.status === 200) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = function() {
            reject(xhr.statusText);
        };
        xhr.send(formData);
    });
}

// 파일 선택이 변경되었을 때 호출되는 함수
function handleFileSelect(event) {
    var file = event.target.files[0];
    var uri = '/user/profileImg'; // 업로드할 서버의 URI

    uploadFile(uri, file)
        .then(function(response) {
            console.log('File uploaded successfully:', response);
            let profileUrl=callApi("/user/profileImg","get","").imgUrl;
            $("#userProfileImg").attr("src", profileUrl);

        })
        .catch(function(error) {
            console.error('File upload failed:', error);
        });
}

// 파일 선택 input 요소에 change 이벤트 리스너 추가
document.getElementById('fileInput').addEventListener('change', handleFileSelect);


 let profileUrl=callApi("/user/profileImg","get","").imgUrl;
    $("#userProfileImg").attr("src", profileUrl);

</script>

 

코드는 아래와 같다. 

원래 ajax 를 통해서 파일을 전송하려 했는데 

 file 을 전송할때는 ajax 로는 못한다고 해서 xhr 을 이용해서 보내기로 했다. 

 

서버에서는 

@PreAuthorize("isAuthenticated()")
@PatchMapping("/profileImg")
@ResponseBody
public String changeProfileImg(@RequestParam("file") MultipartFile file) throws IOException {
    SiteUser user= rq.getLoginUser();

    userService.addNewProfileImg(user, file);

    return "";
}

@PreAuthorize("isAuthenticated()")
@GetMapping("/profileImg")
@ResponseBody
public String getProfileImg(){
    SiteUser user=rq.getLoginUser();

    return "{\"imgUrl\": \""+user.getProfileImgUrl()+"\"}";
}

 

이런식으로 굴러 간다. 

이제 전반적인 디자인 수정을 끝내고 프로젝트를 마무리 하려 한다.