ImageFile & JSON 함께 보내기

File과 JSON DATA를 FORMDATA에 같이 보내보자!

FormData란?

FormData는 HTML 폼 데이터로, 폼을 쉽게 보내도록 도와주는 객체다. 네트워크 메서드의 바디에 FormData 객체를 넣으면, HTTP 메시지는 인코딩되고 Content-Type 속성은 multipart/form-data로 지정된 후 전송된다.

const formDataAxios = () => {
  const instance = axios.create({
    baseURL: API_URL,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  return instance
}
JavaScript
복사

APIModule.js에 있는 formDataAxios를 사용하였다.

const formData = new FormData()

const uploadImg = (e) => {
  const fileInput = e.target
  if (fileInput && fileInput.files && fileInput.files.length > 0) {
    const file = fileInput.files[0]
    formData.append('new_image', file)

    const reader = new FileReader()

    reader.onload = (event) => {
      imageURL.value = event.target.result
    }
    reader.readAsDataURL(file)
  }
}
JavaScript
복사

파일 업로드 시 formData.append()를 해주는 모습. 원래는 file을 readFiled을 통해 base64로 변환하여 보내주려다가.. 문자열이 너무너무 길어서 이건 아니다 싶어 바로 우회.(사실 500에러만 엄청뜸)

알고보니 파일 전체를 그냥 보내면 해결되는 문제였다. 만약 이미지 파일을 수정하게 된다면 formData에 새로운 이미지를 파일로 보내주면 된다. 이미지를 수정하지 않는다면 그냥 보내주지 않아도 됨!!

const modify = async () => {
  if (user.value.password == null) user.value.password = ''
  if (user.value.gender == '여성') user.value.gender = 'F'
  else if (user.value.gender == '남성') user.value.gender = 'M'
  else user.value.gender = ''

  formData.append(
    'personal_info',
    new Blob([JSON.stringify(user.value)], { type: 'application/json' })
  )

  const res = await changeMyInfo(formData)
  if (res) {
    alert('수정 되었습니다.')
    router.push('/')
  } else alert('수정이 실패하였습니다. 정보를 확인해주세요.')
}
JavaScript
복사

그 후 최종적으로 수정하기 버튼을 눌렀을 경우. 백과 프론트의 데이터 정보를 맞춰주고, formData.append()를 해준다. 위와 같이 코드를 수정한 후 데이터를 전송하니, data 내부에는 json 데이터가, 파일은 각각의 key, value 형태로 잘 들어가는 것을 확인할 수 있었다.

어떻게 동시에, 따로 보내야 하지?

그냥 다짜고짜 파일과 함께 보냈더니, 415 (Unsupported Media Type) 에러가 발생했다. 그래서 file은 multipart/form-data, 그 외의 데이터는 application/json 형식으로 따로 보내기 위해 Blob을 사용해주었다.

Blob(Binary Large Object)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용된다.