[JS] FormData를 이용한 Local 이미지(+ file) Axios로 전송하기

 

 

 

 

MSA 아키텍처를 이용하여 서버를 구성하고 있기 때문에 여러 서비스 간 통신은 필수다.

그러던 중 A 서비스에서 B 서비스로 Axios를 통해 통신하는데 테스트를 위해 Local 이미지를 보내줘야 하는 상황이었다.

프론트단에서 Axios를 사용하여 전달해주는 것과 달라 공유하고자 한다.

 

 

FormData가 무엇인고?

FormData 형식은 postman 등 다양한 API 테스트 툴을 사용했다면 익숙할 단어다.

간단하게 말하면 file을 보내는 형식이라고 할 수 있다.

key-value을 한 쌍으로 key에는 name을 value엔 file을 업로드한다.

 

 

 

프론트에서는?

<form>
  <label htmlFor="profile-upload" />
  <input type="file" id="profile-upload" accept="image/*" onChange={onChangeImg}/>
</form>

    const uploadFile = e.target.files[0]
    const formData = new FormData()
    formData.append('files',uploadFile)

프론트의 코드를 보면 input type=file을 가져와서 formData에 append 해준다.

따로 어떠한 처리를 하지 않아도 input 태그가 알아서 정보를 서버에 전달할 수 있게 만들어준다.

 

 

 

 

서버에서 서버로 image를 보낼때는?

그렇다면 서버에서 서버로 로컬 이미지를 보내고 싶을때는 어떻게 해야할까?

서버에서는 input 태그를 이용할 수 없다.

 

const formData = new FormData();
formData.append(
  "file",
  fs.createReadStream(
    "/data/9791160801484.jpg"
  )
);

바로 fs.crateReadStream을 사용해주면 된다!

그럼 스트림 단위로 파일을 읽고 써주기 때문에 A 서버에서 B 서버로 이미지를 전달할 때 에러가 발생하지 않는다.

 

혹시 나처럼 서버에서 서버로 이미지를 보내고 싶은데 로컬 이미지를 어떻게 보내야 할지 모르겠다면 이 방법을 추천한다.

그 외의 다른 방법이 있다면 언제든지 알려주시길 🙏