[코드로 배우는 스프링부트] Chapter8. 파일 업로드

파일 업로드 위한 설정

• application.yml

spring:
  servlet:
    multipart:
     enabled: true # 파일 업로드 여부 선택
     location: ./Img # 파일 임시 저장 경로
     maxRequestSize: 30MB # 한 번에 최대 업로드 가능 용량
     maxFileSize: 파일 하나의 최대 크기

• 모든 작업은 Ajax 방식으로 처리
• 업로드 결과는 JSON 형태로 제공

---

MIME

• MIME (Multipurpose Internet Mail Extension, 파일변환)
  • 클라이언트에게 전송된 문서의 다양성 알려주기 위한 메커니즘
  • 파일 확장자 처리하는 방법에 대한 정보를 브라우저에 전달
  • 파일 종류 / 파일 포맷의 형식 (ex-image/gif)
  • 형식에는 대/소문자 가리지 않으며, 대부분 소문자 사용

Type

1. 개별 타입

   1. text - 특정 문자셋으로 구성된 텍스트 정보 or 포스트 스크립트 등의 formatted text 전송에 사용

   서브타입 : text/plain, text/html, text/css, text/javascript

2. multipart

   1. 비디오를 제외한 모든 종류의 이미지

   서브타입 : multipart/form-data, multipart/mixed 등

3. audio

   1. 모든 종류의 오디오 파일 전송

   서브타입 : audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav

4. video

   1. 모든 종류의 비디오 파일 전송

   서브타입 : video/webm, video/ogg

5. application

   1. 모든 이진 데이터 전송

   서브타입 : application/octet-stream, application/pkcs12, application/xml 등

참고-MIME란 무엇인가

---

파일 저장하기

• FileCopyUtils - 스프링 자체에서 제공
• MultipartFile의 transferTo() 사용
• 파일 저장 경로는 application.yml에 별도의 설정값으로 저장

com:
  example:
    upload:
      path: ./sampleImgPath

• 저장 단계에서 고려사항
  1. 확장자가 이미지만 가능
  2. 파일 확장자 체크(업로드 및 저장시 체크
  3. MultipartFile - getContentType()
  4. 파일명 동일한 경우 덮어쓰는 문제
  5. 파일명에 시간 추가
  6. UUID 통해 고윳값 사용(UUID_파일명)
  7. 업로드 된 파일 저장하는 폴더 용량
  8. 연/월/일 폴더 생성해 파일 분배

업로드 결과 반환 및 화면 처리

• 브라우저에서 필요한 정보
  - 업로드된 파일의 원래 이름
  - 파일의 UUID
  - 파일 저장 경로

  클래스와 객체 구성해 처리(브라우저에서 간단하게 처리하기 위해)

---

업로드 이미지 출력하기

• probeContentType - 파일 확장자에 따라 브라우저에 전송하는 MIME 타입 변경 메서드

• FileCopyUtils - 파일 데이터 처리

---

썸네일 이미지 생성 및 화면 처리

• 과정
  - 라이브러리 활용해 섬네일 파일 생성

  		```docs
  		implementation group: 'net.coobird', name: 'thumbnailator', version: '0.4.14'
  		```
  	- 섬네일 파일명 표시(`thumbnail_`)
  	- `UploadResultDTO`에 `getThumbnailURL()` 추가해 섬네일 경로 \<img>  처리

---

파일 삭제

• 파일 삭제는 URL로 처리 가능 ('연/월/일/uuid_파일명')
• 경로와 UUID 포함된 이름을 파라미터로 받아 삭제 결과를 Boolean으로 반환하는 메서드 추가
• 원본과 섬네일 같이 삭제

브라우저 삭제

• 파일 삭제 버튼과 이미지를 하나의 <div>로 묶어 같이 삭제