본문 바로가기

JavaScript

[JavaScript] 파일 업로드

input으로 받은 정보와 파일을 Api에 같이 보내야 하는데 보내야할 Content-Type이 다른 경우

header의 Content-Type을 multipart/form-data 설정하고

input의 정보는 blob 객체로 변환하여 formData에 담아 파일과 함께 보냅니다.

const inputData = {} // input으로 받을 데이터
const fileData = {} // input File

const formData = new FormData()
const json = JSON.stringify(inputData)
const blob = new Blob([json], { type: 'application/json' })

formData.append('api에 보낼 이름', blob)
formData.append('api에 보낼 이름', fileData)

axios({
  method: 'POST',
  url: '요청할 주소',
  headers: { 'Content-Type': 'multipart/form-data' },
  data: formData,
})