caffeine-library / pro-spring-5

🌱 전문가를 위한 스프링5를 읽는 스터디
5 stars 0 forks source link

[additional] 파일 업로드 - `multipart/form-data` 요청과 `MultipartFile` 객체 바인딩 #101

Closed binchoo closed 2 years ago

binchoo commented 2 years ago

1. 멀티파트 요청하기

파일을 업로드하여 DB에 저장하는 기능을 스프링 MVC로 구현하고 있습니다.

이것을 구현하기에 앞서 충분히 이해해야 할 지식입니다.

1.a. 멀티파트 요청

HTML form 태그에서 enctype 속성에 multipart/form-data 를 배정할 경우

생성하는 요청의 Content-Typemultipart/form-data가 된다.

폼에 작성된 데이터들을 요청 바디에 특이한 형식으로 담긴다.

파일 업로드를 위한 폼 양식에서 사용한다.

1.b. 멀티파트 요청 뷰 작성하기

image

<!DOCTYPE html>
<html>
<body>

<h1>The form enctype attribute</h1>

<form action="/action_page_binary.asp" method="post" enctype="multipart/form-data">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <lable for="file"> File Upload:</label>
  <input type="file" name="file">
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML 폼을 작성할 때

formenctype 속성을 multipart/form-data 로 한다.

form의 내부에 <input type="file" ...> 태그를 추가하면 이미지처럼 파일 선택창을 불러오는 버튼이 추가된다.

1.c. 멀티파트 요청 패킷

POST https://www.w3schools.com/action_page_binary.asp HTTP/1.1
Host: www.w3schools.com
Connection: keep-alive
Content-Length: 700679
Cache-Control: max-age=0
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Upgrade-Insecure-Requests: 1
Origin: https://www.w3schools.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryfmPGexsk7QQdDqBV
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: iframe
Referer: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_enctype
Accept-Encoding: gzip, deflate, br
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: _ga=GA1.2.2095959320.1639449450; _gid=GA1.2.1662986477.1639449450; _pbjs_userid_consent_data=6683316680106290; _lr_env_src_ats=false; cto_bundle=k-yYHF94WnRPdDVPbUdDZ21PSjQ1b1FmSHdnWHBqODZIJTJGJTJGVGRNZlBORGE0SzRlaWNjOHlKbUJoZ3dvYUhlVWM0TyUyRmtlc0lmJTJGUVVmRVlkSE1pZGhKQ2UwRlQ2bWZmSHpkbkZIanhqJTJGNllZVnVjVDE1V21yMXJockgzZVh3TXpKSDBpd0wlMkJRZlVTWFZMU1VFQ1NqeFY3aHczUGclM0QlM0Q; cto_bidid=DAaDKF9XYVZ5dVRCZDRkV0I0TVhFajZSUlJoY1I3U1Jad1IlMkYyJTJGSmp2ZWdNMlJlaXhvR0JUSHUlMkJBWU5YbVRzYmpmOER2OVhwWTZSeUNmT2EyQVRBNFoyaUlLamVpMEdkYVZ0aW5NWjF2eWlmSmV1NCUzRA; __gads=ID=10e7397e4ade30a3:T=1639449451:S=ALNI_MYs9iSxOrHhcaXhLtU59HlMx72XQg; _lr_retry_request=true; ASPSESSIONIDASBDBADC=FJOBMLAAGAOEPMDLBHOKBGJI; ASPSESSIONIDQSSDSCTR=PPIDJABAJGONIJEBPGAPJAPP; _gat=1

------WebKitFormBoundaryfmPGexsk7QQdDqBV
Content-Disposition: form-data; name="fname"

?щ퉰
------WebKitFormBoundaryfmPGexsk7QQdDqBV
Content-Disposition: form-data; name="lname"

二?
------WebKitFormBoundaryfmPGexsk7QQdDqBV
Content-Disposition: form-data; name="file"; filename="2.1?뚰뙆?щ즺.png"
Content-Type: image/png

이미지의 바이너리가 계속됨...

폼의 Submit 버튼을 눌렀다. 그리고 서버로 보내게 되는 멀티파트 요청을 캡쳐했다.

폼에 작성한 데이터는 요청 바디에 순서대로 구획을 가지고 삽입되어 있다.

지금 보기로는, 마지막 파트에 업로드된 이미지의 바이너리가 담긴 듯하다.

스프링 목 MVC로 테스트한다면 이러한 멀티파트 요청을 흉내내야 하므로, 아래 사항을 눈 여겨 보아야 할 것이다.

• 컨텐트 타입은?

multipart/form-data

• 리퀘스트 바디에 값을 분절해 넣어야 하는데 나는 어떻게 구현하지?

multipart() 요청 빌더 사용

MockMultipartFile 객체 사용

1.d. 멀티파티 요청 패킷 - 여러 파일을 업로드하면

앞선 예제는 문자열 자료 2개와 이미지 파일 1개를 전송하였다.

이번에는 이미지의 갯수를 3개로 늘려 "file" 이라는 동일한 이름으로 요청에 실을 것이다.

이 때 이미지들이 요청 바디에 어떻게 분절되어 담길까?

POST https://www.w3schools.com/action_page_binary.asp HTTP/1.1
Host: www.w3schools.com
Connection: keep-alive
Content-Length: 700679
Cache-Control: max-age=0
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Upgrade-Insecure-Requests: 1
Origin: https://www.w3schools.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryfmPGexsk7QQdDqBV
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: iframe
Referer: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_enctype
Accept-Encoding: gzip, deflate, br
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: _ga=GA1.2.2095959320.1639449450; _gid=GA1.2.1662986477.1639449450; _pbjs_userid_consent_data=6683316680106290; _lr_env_src_ats=false; cto_bundle=k-yYHF94WnRPdDVPbUdDZ21PSjQ1b1FmSHdnWHBqODZIJTJGJTJGVGRNZlBORGE0SzRlaWNjOHlKbUJoZ3dvYUhlVWM0TyUyRmtlc0lmJTJGUVVmRVlkSE1pZGhKQ2UwRlQ2bWZmSHpkbkZIanhqJTJGNllZVnVjVDE1V21yMXJockgzZVh3TXpKSDBpd0wlMkJRZlVTWFZMU1VFQ1NqeFY3aHczUGclM0QlM0Q; cto_bidid=DAaDKF9XYVZ5dVRCZDRkV0I0TVhFajZSUlJoY1I3U1Jad1IlMkYyJTJGSmp2ZWdNMlJlaXhvR0JUSHUlMkJBWU5YbVRzYmpmOER2OVhwWTZSeUNmT2EyQVRBNFoyaUlLamVpMEdkYVZ0aW5NWjF2eWlmSmV1NCUzRA; __gads=ID=10e7397e4ade30a3:T=1639449451:S=ALNI_MYs9iSxOrHhcaXhLtU59HlMx72XQg; _lr_retry_request=true; ASPSESSIONIDASBDBADC=FJOBMLAAGAOEPMDLBHOKBGJI; ASPSESSIONIDQSSDSCTR=PPIDJABAJGONIJEBPGAPJAPP; _gat=1

------WebKitFormBoundaryfmPGexsk7QQdDqBV
Content-Disposition: form-data; name="fname"

?щ퉰
------WebKitFormBoundaryfmPGexsk7QQdDqBV
Content-Disposition: form-data; name="lname"

二?
------WebKitFormBoundaryfmPGexsk7QQdDqBV
Content-Disposition: form-data; name="file"; filename="2.1?뚰뙆?щ즺.png"
Content-Type: image/png

이미지1의 바이너리

------WebKitFormBoundaryfmPGexsk7QQdDqBV
Content-Disposition: form-data; name="file"; filename="17aeb83554850c0e3.jpeg"
Content-Type: image/jpeg

이미지2의 바이너리

請m:J^쌣뼇멼,?4뻒i=?묖 ?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?B?G?
------WebKitFormBoundaryfmPGexsk7QQdDqBV
Content-Disposition: form-data; name="file"; filename="1617023256.png"
Content-Type: image/png

이미지3의 바이너리

------WebKitFormBoundaryfmPGexsk7QQdDqBV--

3개의 이미지 파일들이 각자의 파트로 나뉘어 담겨졌다. 하지만 이름은 모두 "file"을 사용한다.

이렇게 name을 통일한 상황이라면, 스프링MVC가 이미지들을 컨트롤러 매개변수에 바인딩 할 때, 리스트 자료로 바인딩을 해 줄 수가 있다!

2. 멀티파트 요청 수신

2.a. 수신 객체 정의

클라이언트에서 수신할 객체를 정의하자. 스프링 MVC가 컨트롤러 매개변수에 수신된 자료들을 객체 멤버에 바인딩할 것이다.

@ToString(exclude = {"file"})
@Setter
@Getter
@AllArgsConstructor
public class UserWithPartVO {
    private String name;
    private int age;
    private List<MultipartFile> file;
}

간단하게 문자열 + 정수 + 업로드 된 파일을 저장한다.

요청에 "file" 이란 name을 갖는 이미지들이 여럿 있다면 List<MultipartFile> 타입에 담을 수 있다.

만약 이미지 별 name 이 다르다면 Map<String, List<MultipartFile>> 타입이 받아낼 수 있다.

한 편, 서블릿 3.0부터 javax.servelet.http.Part 타입으로 MultipartFile 을 대체할 수 있다고 한다. 하지만 관련하여 바인딩이 올바로 동작을 하는 걸 확인할 수 없었다. 빈 설정 쪽 문제인지 추후 조사해 보아야겠다.

2.b. 컨트롤러 작성

@Slf4j
@RequestMapping("/multipart")
@Controller
public class MultipartPracticeController {

    @RequestMapping(method = RequestMethod.POST)
    public ResponseEntity saveObjectAndImages(UserWithPartVO userWithPartVo) {
        log.info("UserVO를 획득:" + userWithPartVo.toString());
        Optional.ofNullable(userWithPartVo.getFile())
                .ifPresent(images-> {
                    log.info("이미지를 " + images.size() + "개 얻었습니다.");
                    images.forEach(part -> {
                        log.info("이름: " + part.getResource().getFilename() + " 크기 :" + part.getSize());
                    });
                });
        return ResponseEntity.ok().build();
    }
}

HTTP 요청에 담긴 정보는 userWithPartVo 에 매핑될 것이다.

만약 업로드 된 이미지가 없다면, 해당 객체의 List는 null일 것이다(?) →장담할 수 없다. 3절에서 설명 예정.

리스트 객체가 null이 아니라면 이미지들을 조회하여 이름과 크기를 출력해 본다.

2.c. 3가지 테스트 케이스

@SpringJUnitWebConfig(classes = {WebConfig.class})
class MultipartPracticeControllerTests {

    final static String URL = "/multipart";

    MockMvc mvc;

    @Autowired
    MultipartPracticeController controller;

    @Autowired
    ObjectMapper objectMapper;

    UserVO testUserVo;
    MockMultipartFile singleImage;
    List<MockMultipartFile> multiImages;

    @BeforeEach
    public void setup() {
        this.mvc = MockMvcBuilders.standaloneSetup(controller).build();

        String[] fileNames = {"image1.png", "image2.png", "image3.png"};
        byte[] fileBytes = new byte[]{-1, -1, -1, -1, -1, -1};

        this.multiImages = Arrays.stream(fileNames)
                .map(it-> new MockMultipartFile("file", it, "image/png", fileBytes))
                .collect(Collectors.toList());

        this.singleImage = multiImages.get(0);
    }

    @DisplayName("객체를 멀티파트 전송했을 때")
    @Test
    public void sendObjectAndNoImageTest() throws Exception {
        // given
        testUserVo = new UserVO("jaebin-joo", 90);
        // when
        MvcResult result = mvc.perform(multipart(URL)
                    .characterEncoding("UTF-8")
                    .param("name", testUserVo.getName())
                    .param("age", String.valueOf(testUserVo.getAge())))
                .andDo(print())
                .andExpect(status().isOk())
                .andReturn();
        MultipartHttpServletRequest request = (MultipartHttpServletRequest) result.getRequest();
        // then
        assertEquals(0, request.getMultiFileMap().size());
    }

    @DisplayName("객체와 한 이미지를 멀티파트 전송했을 때")
    @Test
    public void sendObjectAndImageTest() throws Exception {
        // given
        testUserVo = new UserVO("jaebin-joo", 91);
        // when
        MvcResult result = mvc.perform(multipart(URL)
                    .file(singleImage)
                    .characterEncoding("UTF-8")
                    .param("name", testUserVo.getName())
                    .param("age", String.valueOf(testUserVo.getAge())))
                .andDo(print())
                .andExpect(status().isOk())
                .andReturn();
        MultipartHttpServletRequest request = (MultipartHttpServletRequest) result.getRequest();
        // then
        assertEquals(1, request.getMultiFileMap().size());
        assertEquals(1, request.getMultiFileMap().get("file").size());
    }

    @DisplayName("객체와 여러 이미지를 멀티파트 전송했을 때")
    @Test
    public void sendObjectAndImagesTest() throws Exception {
        // given
        testUserVo = new UserVO("jaebin-joo", 92);
        // when
        MvcResult result = mvc.perform(multipart(URL)
                    .file(multiImages.get(0)).file(multiImages.get(1)).file(multiImages.get(2))
                    .characterEncoding("UTF-8")
                    .param("name", testUserVo.getName())
                    .param("age", String.valueOf(testUserVo.getAge())))
                .andDo(print())
                .andExpect(status().isOk())
                .andReturn();
        MultipartHttpServletRequest request = (MultipartHttpServletRequest) result.getRequest();
        // then
        assertEquals(1, request.getMultiFileMap().size());
        assertEquals(3, request.getMultiFileMap().get("file").size());
    }
}

해당 내용으로 테스트 수행 후 찍히는 로그이다.

객체 전송

이 경우 HTTP 요청에서 getMultiFileMap() 을 가져오면 담겨있는 자료가 없다.

16:37:54.071 [main] INFO org.binchoo.study.spring.multipart.profileservice.controller.MultipartPracticeController - UserVO를 획득:UserWithPartVO(name=jaebin-joo, age=90, file=null)

객체 + 이미지 1개 전송

이 경우 HTTP 요청에서 getMultiFileMap() 을 가져오면

"name" 키에 길이가 하나인 리스트가 존재한다.

16:37:54.064 [main] INFO org.binchoo.study.spring.multipart.profileservice.controller.MultipartPracticeController - UserVO를 획득:UserWithPartVO(name=jaebin-joo, age=91, file=[org.springframework.mock.web.MockMultipartFile@5ba1b62e])
16:37:54.064 [main] INFO org.binchoo.study.spring.multipart.profileservice.controller.MultipartPracticeController - 이미지를 1개 얻었습니다.
16:37:54.064 [main] INFO org.binchoo.study.spring.multipart.profileservice.controller.MultipartPracticeController - 이름: image1.png 크기 :6

객체 + 이미지 3개 전송

이 경우 HTTP 요청에서 getMultiFileMap() 을 가져오면

"name" 키에 길이가 3인 리스트가 존재한다.

16:37:54.019 [main] INFO org.binchoo.study.spring.multipart.profileservice.controller.MultipartPracticeController - UserVO를 획득:UserWithPartVO(name=jaebin-joo, age=92, file=[org.springframework.mock.web.MockMultipartFile@5864e8bf, org.springframework.mock.web.MockMultipartFile@37ca3ca8, org.springframework.mock.web.MockMultipartFile@191ec193])
16:37:54.019 [main] INFO org.binchoo.study.spring.multipart.profileservice.controller.MultipartPracticeController - 이미지를 3개 얻었습니다.
16:37:54.020 [main] INFO org.binchoo.study.spring.multipart.profileservice.controller.MultipartPracticeController - 이름: image1.png 크기 :6
16:37:54.020 [main] INFO org.binchoo.study.spring.multipart.profileservice.controller.MultipartPracticeController - 이름: image2.png 크기 :6
16:37:54.020 [main] INFO org.binchoo.study.spring.multipart.profileservice.controller.MultipartPracticeController - 이름: image3.png 크기 :6

3. form에서 파일 업로드를 누락하고 전송했을 때 주의

image

그림 같은 뷰가 있다고 하자. 폼 태그의 "name", "phoneNumber", "birthDate" 인풋엔 값들이 채워졌다.

다만 "file" 인풋엔 파일을 업로드하지 않은 상태이다.

여기서 Submit을 수행하면 어떤 일이 벌어질지 예상해 보아야 한다.

멀티파트 요청에 "file"이 누락되고

객체의 MultipartFile 필드엔 null이 바인딩 될 거라고 예상하기 쉽다.

또, 테스트 코드에서 @DisplayName("객체를 멀티파트 전송했을 때") TC가 커버하는 상황 아닌가? 싶지만,

미묘하게 틀리다.

image

사실 생성되는 멀티파트 요청에는 "file"이 잘 들어있다. 다만 아무 내용이 없는, 길이가 0인 상태로. 그러므로 객체의 MultipartFile 필드에도 제대로 객체가 들어간다. 내용이 텅 비었을 뿐이다.

주의사항 요약

서버 측 구현에 까다로움을 줄 수 있으므로, form에서 파일 업로드가 누락되는 상황을 잘 나누어 생각해야겠다.

관련하여 뷰 단에서의 API 호출 전 값 밸리데이션에 대해 합의가 필요할 것이다. image

챕터

93 #94

@caffeine-library/readers-pro-spring-5