triplus) 이미지 여러개 전송하기

저번 프로젝트에선 이미지를 하나만 보냈는데, 이번엔 이미지 3개를 전송해야 했다.
formData객체는 window.formData에 위치한 객체인데, append 메소드를 이용해 key-value값을 추가해줄 수 있다.

하나의 formData객체의 여러 값을 넣어서 전송할 수 있어 코드 작성을 해주었다.

const handleSubmitClick = () => {
	for (let key in fileArray) {
        if (fileArray[key]) {
          formData.append('file', fileArray[key]);
        } else continue;
    }
}

여기서 또 한단계 발전이 필요했는데, 저번 프로젝트에서는 formData에 대한 이해가 부족해서 파일만 전송이 가능한 줄 알고 나머지 input정보는 따로 서버에 전송해줬다. 그래서 서버요청을 두번 보내는 불필요한 로직으로 코드를 작성해주었는데, 그 코드가 아래 코드이다.

const createPost = () => {
    if (form !== '') {
      createPosts(inputs).then((res) => {
        setForm(form.append('postId', res.data.post.postId));
        console.log(form);
        sendImg(form).then(() => {
          alert('저장되었습니다.');
          navigate('/posts');
        });
      });
    } else {
      createPosts(inputs).then(() => {
        alert('저장되었습니다.');
        navigate('/posts');
      });
    }
  };

createPosts함수로 inputs에 담겨있던 정보를 먼저 전송한 다음, 전송이 완료되면 sendImg로 이미지를 따로 보내주었다. (왜그랬지...)

이번에는 formData객체에 input에 있는 정보도 같이 key-value로 만들어서 보내주기로 결정했다.

💡 주의사항 - formData.append를 이용해 key-value를 넣을 때, value는 문자열로만 입력된다. 배열을 입력하면 ,(컴마)로 구분된 문자열로 변환되고, 객체를 넣으면 무시된다.

위의 주의사항을 몰랐을 때, 객체에 담겨있는 inputs를 그대로 append해주었더니 서버에 아무런 값도 전달되지 않는 불상사가 있었다.
객체를 넣으면 무시된다.....!
그래서 inputs에 있는 값들을 반복문을 통해 하나하나 append해주었다.

      const formData = new FormData();
      for (let key in inputs) {
        if (key === 'startTime') {
          const iStartTime =
            inputs.startTime.sdayNight +
            ' ' +
            inputs.startTime.stime +
            ':' +
            inputs.startTime.sminute;
          formData.append(key, iStartTime);
        } else if (key === 'endTime') {
          const iEndTime =
            inputs.endTime.edayNight + ' ' + inputs.endTime.etime + ':' + inputs.endTime.eminute;
          formData.append(key, iEndTime);
        } else {
          formData.append(key, inputs[key]);
        }
      }

formData 잘 알고 사용하자!