[문법] 파일 업로드

서론

※ 과거에 기록한 내용에서 중요한 부분만 발췌하여 모두가 이해하기 쉽게 다시 서술한다.

 

본론

→ html 폼 전송 방식

1) x-www

x-www 방식은 name=value 형식으로 문자를 전달한다.

 

하지만, x-www는 문자와 파일을 함께 전달할 수 없다. 파일은 InputStream에 저장되는 바이어리 데이터라서 문자에 담을 수 없다. 실무에서는 한 번에 문자와 파일을 입력 받는 경우가 많다. 

 

2) multipart/form-data

multipart 방식은 boundary를 경계로 여러 파트로 나눠서 문자와 파일을 함께 전달할 수 있다. content-type은 image/png로 엔터하고 파일 바이너리 데이터가 들어간다.

 

→ 실행

개발자 도구로 보면 content type과 경계가 보인다.

 

바운더리를 경계로 문자와 itemV 값과 이미지 바이너리 데이터가 다 깨져서 넘어온다. 스프링에서는 MultiPart를 직접 사용할 수 있다.

 

- 스프링 파일 업로드

스프링에서는 Multipart 인터페이스로 파일을 편리하게 제공한다.

 

file을 requestParam으로 받고 transfer로 쉽게 업로드 할 수 있다.

 

- 파일 업로드, 다운로드

→ 요구사항

1) 상품은 이름, 첨부파일 1개, 이미지 여러개를 입력
2) 첨부파일 업로드, 다운로드
3) 이미지는 웹 브라우저에서 전시 가능

 

- 도메인

1) 상품 클래스

첨부 파일은 1개, 이미지는 여러 개를 가진다.

 

2) 첨부 파일 데이터

RawFileData는 업로드 파일 명, 저장 경로명 등 메타 정보를 가진다. 실제, 바이너리 이미지는 스토리지에 저장되고 메타 정보만 DB에 저장된다.

 

3) 파일 업로더

업로드를 하기 위한 별도의 객체를 가진다. 이미지와 첨부파일을 업로드하고 RawFileData에 필요한 필드를 생성한다.

 

2. 컨트롤러

1) 상품 저장용 폼

이미지는 여러 장, 첨부 파일은 1개를 폼으로 받는다. Multipart를 쓰면 쉽게 데이터를 받을 수 있다.

 

2) 컨트롤러

컨토롤러에서 업로드를 수행한다. ModelAttribute를 하면 폼의 Multipart에 데이터가 자동으로 들어간다.

 

3) 뷰

브라우저에 이미지를 불러오기 위한 컨트롤러를 만들고

 

그 컨트롤러를 호출하는 img 테그를 넣으면

 

이미지가 전시된다.

 

- 설계 개선하기

-> 수정 전

컨트롤러: 업로더의 업로드 호출
업로더: 업로드, DB에 저장될 rawfiledata 생성

 

-> 수정 후

FileConverter : RawFileData 생성
FileExtension : 파일 확장자
업로더: 업로드, 업로드 String 경로 반환

 

1. FileConverter

이전에는 업로더에 멀티파트를 넣고 RawFileData를 반환했는데 처음부터 업로더로 RawFileData를 넣어주는 게 좋은 설계이다.

 

컨버터에서 멀티 파트 메타 데이터를 RawFileData로 변환한다.

 

2. FileExtension

파일 확장자를 메타 데이터에 추가했다.

 

3. 업로더

이전에는 업로더에 멀티 파트를 전달하고 멀티 파트에서 데이터를 꺼냈지만,

 

이젠 업로더는 RawFileData를 받아서 바로 파일을 업로드하고 저장 경로를 반환한다. 

 

-> 결론

이렇게 해야, 하나의 클래스에서 여러 가지 역할을 하지 않고, 인자로 클래스를 넘겨주어 클래스간 결합이 발생하지 않는다. 앞으로 하나의 메서드는 하나의 역할, 하나의 클래스는 하나의 역할만 해야하며, 모든 클래스 분리는 위처럼 원본의 문제를 해결하여 수정하는 방향으로 하면 된다.