[HTTP] FormData 적용 방법 정리! (multipart/form-data)

POST 요청 header의 'Content-Type'이 'multipart/form-data'인 경우, 전송할 데이터를 FormData로 만들어 보내야 한다. 이번에 파일이 포함된 메일 전송 기능을 구현하면서, 처음으로 FormData에 대한 작업을 해보았다. 그 방법을 정리해보려고 한다!

const formData = new FormData(); // FromData 생성

// 받는 사람 추가
inputFromList.forEach((item, idx) => { 
  formData.append(`toRecipients[${idx}].email`, item.email);
  formData.append(`toRecipients[${idx}].name`, item.name);
});
// 참조 추가
inputCcList?.forEach((item, idx) => { 
  formData.append(`ccRecipients[${idx}].email`, item.email);
  formData.append(`ccRecipients[${idx}].name`, item.name);
});
// 숨은 참조 추가
inputBccList?.forEach((item, idx) => { 
  formData.append(`bccRecipients[${idx}].email`, item.email);
  formData.append(`bccRecipients[${idx}].name`, item.name);
});
// 메일 내용 추가
formData.append('content', textAreaValue); 
// 첨부파일 추가
fileList.forEach((file) => { 
  formData.append(`files`, file, file.name);
});

• new FormData()를 통해 FormData 객체를 만들고, append() 함수를 이용해 FormData 객체안에 이미 키가 존재하면 그 키에 새로운 값을 추가하고, 키가 존재하지 않으면 새로 추가하게 만든다.