FormData를 이용하여 json과 여러 파일을 같이 보내는 방법

 

 

const sendData = async (data) => {
  const formData = new FormData();

  try {
    const requestObject = {
      name: data.name,
      price: data.price
    };

    const jsonData = JSON.stringify(requestObject);
    formData.append('request', new Blob([jsonData], { type: 'application/json' }));

    for (let i = 0; i < data.files.length; i++) {
      formData.append('files', data.files[i]);
    }

    const response = await fetch('http://localhost/post/goods', {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      const jsonResponse = await response.json();
      return jsonResponse;
    } else {
      throw new Error('Request failed with status: ' + response.status);
    }
  } catch (error) {
    console.log('에러 발생', error);
  }
};

 

files를 나누어 보내자

 

FormData 인스턴스에 파일을 추가할 때는 파일들의 배열 자체를 직접 추가하는 것이 아니라 배열 내 파일 객체를 추가해야 한다.

 

 

json을 blob형태로 바꾸어 보내자

 

일반적으로 FormData는 텍스트 필드 또는 파일 필드와 같은 데이터를 전송하는 데 사용된다. 하지만 JSON은 문자열 형태로 전달되어야 하는데, FormData는 문자열을 직접 추가할 수 있는 메서드를 제공하지 않는다.

따라서 JSON 데이터를 문자열로 변환하고, 해당 문자열을 Blob으로 감싸는 것으로 JSON 데이터를 FormData에 추가하여야 한다.

이렇게 Blob으로 감싼 JSON 데이터를 FormData의 필드에 추가하면, 서버는 해당 필드에서 데이터를 읽어 JSON 데이터를 다시 파싱하여 사용할 수 있게 된다.