Axios를 이용해 BinaryFile Upload 하기

기존 MultiPart 를 Content-Type 으로

FormData를 이용해 이미지를 업로드하는 방법은 많이 존재하지만

Octet-stream을 이용한 binary file로 업로드하는방법의 글은 없어 작성해본다.

https://kdh931228.tistory.cm/62

 

우선 알고있는대로 axios를 이용해 input Tag에 들어온 이미지를 업로드를 해보자

 

현재 REST API Server Controller 상태다.

header로 파일명을 받고 request에서 stream을 추출해 AWS S3로 업로드를 진행한다.

 

 

Front로 돌아와 React에서 Input의 onChange를 이용해 Axios로 Post요청을 보내자.

현재 서버에서는 stream만 받고있으므로 Content-Type을 필히 octet-stream으로 설정해주자 ( 중요 )

이렇게 서버에 API를 요청한뒤 S3 버킷을 확인해보면...

 

 

0Byte 의 데이터가 존재하지 않는 이미지파일이 업로드됬다.

Backend Server에서 디버깅을 해보니 request에서 inputStream을 추출하는구간에서 null 이 나왔다.

 

콘텐츠 타입을 스트림으로 정해주어 요청을 보냈지만 

이미지파일자체가 바이너리 파일이 아니기때문에 Stream으로 담겨서 요청이 가지 못하는것.

 

그렇 어떻게 해결해야할까?

 

우선 input 에 이미지파일이 어떤 형태로 브라우저에 등록되는지 살펴보자.

 

이미지파일은 File 객체를 상속받고있으며

File 객체는 Blob 객체를 상속받고있다.

Blob가 무엇인지 찾아보았더니 Binary Large Object 의 약자로 이진파일을 나타내는 바이너리 객체였다.

결국 이진파일을 상속받는거라면 이미지파일을 다시 바이너리파일로 만들 수 있지않을까?

방법을 찾아봤더니...

new Blob([file], { type: 'application/octet-stream' });

 

위처럼 Blob를 인스턴스화하면서 타입을 지정할 수 있다. 

이렇게 이미지파일을 바이너리화 시킨 뒤

 

multiPart의 formData를 담아 보내듯이 Axios data 매개변수에 BinaryFile을 담아 요청을 보내주면 성공적으로 이미지가 S3에 업로드되는것을 확인 할 수 있다.

( 타입을 Blob에서 정해줬지만 headers에 놓치지않고 또 Content-Type을 적어줘야한다 )