Current request is not a multipart request.

DolphaGo commented 3 years ago

vue -> spring으로 이미지를 넘길 때 발생한 이슈

포스트맨으로 서버로 이미지 저장 OK
vue에 파일 정상 로딩 OK
페이지(Vue)에서 서버(Spring)로 데이터를 넘길 때 발생한 이슈

가장 처음의 Exception은 the request was rejected because no multipart boundary was found 였다. 이 때는 요청을 보낼 때 multipart/form-data를 직접 지정해서 요청을 보냈었다.

구글링해보니 대부분이 요청을 보낼 때 직접 header를 세팅하지 말라는 것이였다. 그래서 다음과 같이 헤더 설정을 뺀 채로 reuqest를 보내봤다.

그리고 서버쪽은 다음과 같다.

그랬더니 등장한 에러 org.springframework.web.multipart.MultipartException: Current request is not a multipart request

성공할 때 (Swagger)

Received [POST /image/upload HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 17547
sec-ch-ua: "Chromium";v="92", " Not A;Brand";v="99", "Google Chrome";v="92"
accept: application/json;charset=UTF-8
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary8j94fAZNRyHsvxXT
Origin: http://localhost:8080
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:8080/swagger-ui.html
Accept-Encoding: gzip, deflate, br
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: JSESSIONID=26B558202BC17469AB340807041BDBB6; Idea-b4383cba=ae48661b-c094-4703-ac06-f5748740db77

------WebKitFormBoundary8j94fAZNRyHsvxXT
Content-Disposition: form-data; name="file"; filename="áá¢áá®ááµ.png"
Content-Type: image/png

PNG

...

실패할 때(Vue)

Received [POST /image/upload HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 17352
Access-Control-Allow-Origin: *
Accept: application/json, text/plain, */*
Content-Type: application/x-www-form-urlencoded
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36
Access-Control-Allow-Methods: GET,PUT,POST,DELETE
sec-ch-ua: "Chromium";v="92", " Not A;Brand";v="99", "Google Chrome";v="92"
Origin: http://localhost:3000
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, br
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7

PNG
...

Content-Type: multipart/form-data; boundary~~ 이렇게 나와야 하는데 말이다.

해결했다. new FormData() 로 하면 된다.

    uploadImage (file, key: string) {
      const formData = new FormData()
      formData.append('file', file)
      request.post('http://localhost:8080/image/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
...

DolphaGo commented 3 years ago

https://github.com/letitgobaby/Maven-Spring-Boot/issues/3

https://velog.io/@sa833591/form-data-%EA%B7%B8%EB%A6%AC%EA%B3%A0-MultipartFile

https://gist.github.com/jays1204/703297eb0da1facdc454

DolphaGo commented 2 years ago

formData에 분명히 file을 append 했음에도, log를 찍어보면, 아무것도 보이지 않는다?

https://stackoverflow.com/questions/37235810/formdata-object-shows-empty-even-after-calling-append

DolphaGo commented 2 years ago

fetchRequest 난이도가 개 헬임. 진짜. 모든걸 커스텀해서 처리하니까 정신 나갈뻔함. 시간도둑 그자체. 특히 multipart fetchRequest -> axios로 바꾸니, 한 방에 해결됐는데, axios로는 브라우저 상에서 다운로드를 못받는다는, 즉, Streaming Data를 받지 못한다는 글이 있어서, 오우씨 뭐야 하고 읽어봤다. https://stackoverflow.com/questions/58609130/how-to-consume-the-download-stream-from-axios-using-streamsaver-js

근데, 뭐 해결할 수 있음. responseType으로 blob 이라는 값을 주면 된다.

DolphaGo / TIL

Current request is not a multipart request. #49