Java : 파일 업로드시 이미지 파일만 업로드하기

파일 입력시 이미지 파일만 업로드 허용

• 프론트엔드 : input 태그에 accept 속성 추가

accept="image/jpg, image/jpeg, image/png, image/gif" 

• 백엔드 : 확장자 확인, 이미지 확장자만 업로드 가능한 코드 추가
• 실패한 백엔드 코드들: 자바스크립트에서 확장자 처리를 실패했다..

    // let fileVal = $("#input-pic").val();
    // if( fileVal != "" ){
    //     let ext = fileVal.split('.').pop().toLowerCase(); //확장자분리
    //     //아래 확장자가 있는지 체크
    //     if($.inArray(ext, ['jpg','jpeg','gif','png']) == -1) {
    //         alert('jpg,gif,jpeg,png 파일만 업로드 할수 있습니다.');
    //         return false;
    //     }
    // }


    // let filetype =document.getElementById("input-pic").value;
    // let typecheck = filetype.match(".jpg", ".jpeg", ".png", ".gif");
    //
    // if(!typecheck)
    // {
    //     alert("이미지 파일만 업로드 할 수 있습니다.");
    //     return false;
    // }

• 검색으로 찾은 위의 코드들을 실패해서 기존에 있던 파일이름에서 확장자 추출하는 자바 서비스 코드에서 처리했다. 이렇게 해도 되는 걸까..? 어쨌든 확장자를 확인해서 이미지 외에 업로드를 막아주긴 한다.
• 그리고 사실 return 값을 null로 처리하는건 나도 했던건데, return을 null으로 처리한 것만으로는 계속 오류가 나서 팀원분께 도움을 요청했다.
• 팀원분이 null으로 입력했다고 해서 api 오류가 나는게 이상하다고, 자바스크립트 ajax 코드를 확인하더니 response 형식을 [msg]가 아니라 alert로 바꾸었더니 정상적으로 작동했다. api에서 return과 response 형식이 맞아야 하는 것의 중요성을 실제로 배울 수 있었다.

String contentType = file.getContentType();
String originalFileExtensionBack = null;
if(contentType.contains("image/jpeg")){
    originalFileExtensionBack = ".jpg";
}
else if(contentType.contains("image/png")){
    originalFileExtensionBack = ".png";
}
else if(contentType.contains("image/gif")){
    originalFileExtensionBack = ".gif";
}
else if(contentType.contains("image/bmp")){
    originalFileExtensionBack = ".bmp";
} else {
    return null;
}