파일 업로드 상세 처리

ACAI BERRY DEVELOVER·2023년 3월 27일
0
post-thumbnail

1. 파일의 확장자, 크기 사전처리

1. 파일의 확장자, 크기 사전처리 
	- 특정 첨부파일 확장자 업로드 제한 
	- 특정 크기 이상의 파일 업로드 제한 
    -> 자바스크립트로 처리, uploadAjax.jsp, checkExtension(fileName, fileSize) 

-- 첨부파일 저장할 때 신경써야 할 것 -- 
 
2. 중복된 이름의 첨부파일 처리 
    1) 현재 시간을 밀리세컨드까지 구분해 파일 이름을 생성해 저장 
   ✅ 2) UUID를 이용해서 중복이 발생할 가능성이 거의 없는 문자열 생성해 저장 
   UploadController uploadAjaxPost()에서 randomUUID()를 이용해서 임의의 값 생성 
   
3. 한 폴더 내에 너무 많은 파일의 생성 문제 
	-> 한 폴더에 너무 많은 파일이 있는 경우 속도 저하, 개수 제한 문제가 생김 
     => 일반적으로 '년/월/일' 단위의 폴더를 생성 
     UploadController에 getFolder()함수 생성 -> 오늘의 날짜의 경로를 문자로 생성해줌 
     - 생성된 경로를 폴더 경로로 수정한 후 반환, 해당 경로가 이미 있는지 검사 후 폴더를 생성 
 
 

2. 섬네일 이미지 생성

- 일반 파일과 이미지 파일 구분하기
- 이미지 파일인 경우엔 섬네일 생성하는 추가처리하기 
	- 섬네일 생성 방법 
    		1) JDK에 포함된 API 사용하기 
           ✅ 2) 별도의 라이브러리 사용하기 (자바API에 비해 직접해야 하는 작업이 적음) 
           
1) 이미지 파일 판단 
	- 화면에서 약간의 검사를 통해 업로드되는 파일의 확장자를 검사하긴 하나, 
      서버에 업로드된 파일은 조금 시간이 걸리더라도 파일 자체가 이미지인지 
      정확히 체크 해야함 
	- 특정한 파일이 이미지 타입인지 검사하는 별도의 checkImageType() 메서드 
      UploadController에 추가     
    - 이미지 타입이면 섬네일을 생성하도록 코드 수정 (UploadController) 
    - /uploadAjax를 통해 이미지 파일 업로드 시 원본 파일 그대로 저장, 섬네일 파일 생성, 
      일반 파일일 시 그냥 파일만 업로드됨.

3. 업로드된 파일의 데이터 반환

    Ajax를 이용해 파일 업로드, 브라우저에도 데이터를 반환해야함 
   
    서버에서 Ajax의 결과로 전달해야 하는 데이터는 업로드된 파일의 이름과 원본 파일의 이름,
    파일이 저장된 경로, 업로드된 파일이 이미지인지 아닌지에 대한 정보 
    
    이에 대한 정보를 처리하는 방법 1) 업로드된 경로가 포함된 파일 이름을 반환
    					 ✅ 2) 별도의 객체를 생성해서 처리하는 방법
   
   1)의 방법은 브라우저쪽에서 해야하는 일이 많아서 2)의 방법으로 한다.
   
   - pom.xml에 jackson-databind 관련 라이브러리 포함 
   - 첨부파일의 데이터를 저장하는 AttachFileDTO 클래스 작성 (업로드된 파일의 이름과 원본 파일의 이름,
     파일이 저장된 경로, 업로드된 파일이 이미지인지 아닌지에 대한 정보를 하나로 묶어서 
     전달하는 용도로 사용) 
   - UploadController는 AttachFileDTO의 리스트를 반환하는 구조로 변경해야함 
   - uploadAjaxPost()는 기존과 달리 ResponseEntity<List<AttachFileDTO>>를
     반환하는 형태로 수정, JSON 데이터를 반환하도록 변경한다.
     내부에서는 각 파일에 맞게 AttachFIleDTO를 생성해서 전달하는 구조로 변경된다.
     
    
   - 브라우저에서 Ajax 처리
   	 /uploadAjax에서 결과데이터를 JavaScript를 이용해서 반환된 정보를 처리하도록 수정 
     Ajax 호출 시 결과타입(Content-Type)을 'json'으로 변경 -> 브라우저에 반영됨
   
                        
                     
                            
profile
쓸때 대충 쓰지 말고! 공부하면서 써!

0개의 댓글