[React/JS] 서버에 파일 객체(File Object)/이미지 파일 한번에 여러 개 보내기 - FormData

https://avoc-o-d.tistory.com/85 

[React/JS] 버튼 클릭 시 이미지 업로드, 미리보기 구현하기 (파일 선택 버튼 제거, 커스텀하기)

위는 파일 업로드에 관해 작성한 글입니다.

 

지금 쓰고 있는 글은, API 요청을 할 때 Request body에 파일 객체를 보내줘야 하는 상황을 위해 작성한 글입니다!

json으로는 파일 객체를 읽을 수 없기 때문에 FormData를 활용하여 데이터를 보내기로 합시다!!!

 

 

 

00. 파일 객체

---

업로드한 이미지

이미지 파일 객체를 콘솔로 찍었을 때

파일 객체는 위와 같이 구성되어 있습니다.

이미지 이름인 name : 아보카도.jpg

이미지 형식인 type : image/jpeg

등등.. 접근 가능합니다!

 

 

 

 

01.  Content-Type: "multipart/form-data"

---

axios, fetch 등의 서버 통신 함수는 FormData 객체를 body로 받습니다.

이때 웹 브라우저가 보내는 HTTP 메시지는 Content-Type 속성이 multipart/form-data로 지정된 후 정해진 형식에 따라 인코딩 하여 전송합니다.

 

await axios
      .post( API 주소 , 보낼 데이터 , {
        headers: {
          // 파일 등록을 위해 헤더의 Content-Type 필드에 명시
          "Content-Type": "multipart/form-data",
        },
      })
      .then((response) => {
      
      ...
      
      });

multipart/form-data 🤔
- post 인 경우에만 가능!
- 모든 문자를 인코딩하지 않음을 명시

그런데, FormData를 보낼 땐 header 부분은 브라우저가 자동으로 설정해주기 때문에 위와 같이 따로 지정해줄 필요가 없습니다!

 

 

 

02. FormData 객체에 데이터 담기

---

HTML은 <form> 태그를 통해 input 값을 서버에 전송하지만, JS 에선 FormData() 클래스를 이용하여 똑같이 전송 가능합니다.

  const formData = new FormData();
  
  formData.append(name, value); // name과 value를 가진 form 필드를 추가
  
  formData.append("age", "111"); // <input name="age" value="111"> 와 같은 의미

 

 

 

03. FormData 순회

---

이렇게,,, append를 통해 formdata에 많은 데이터가 담겼다고 합시다!

formdata를 콘솔에 찍어볼까요??

FormData 객체를 콘솔로 찍었을 때

위와 같이 넣은 데이터를 확인할 수 없다는 것을 알 수 있습니다.

왜냐하면 JS 에서 FormData 객체는 XMLHttpRequest 전송을 위한 특수한 객체 형태이기 때문입니다.

 

그렇지만, 확인은 할 수 있어야 하니까! 확인하는 방법은 있습니다!!!

// key 값을 순회
let keys = formData.keys();
for (const pair of keys) {
    console.log(pair); 
}
 
// 폼 객체 values 값을 순회
let values = formData.values();
for (const pair of values) {
    console.log(pair); 
}
 
// 폼 객체 key 와 value 값을 순회
let entries = formData.entries();
for (const pair of entries) {
    console.log(pair[0], " : ", pair[1]); 
}

 

 

 

04. 서버에 전송

---

아래와 같이 서버측에서 정해진 형식에 따라 name, value를 잘 맞추어 작성해주시면 됩니다!

// dataToSubmit : 서버에 보낼 이미지 파일이 담긴 객체
// 예를 들어,
// dataToSubmit= {
//			image : 이미지 파일  -> file
// }
async function submitTest(dataToSubmit = {}) {
  const formData = new FormData();
  
  formData.append("images", dataToSubmit.image);

  let data;
  try {
    await axios
      .post( API주소 , formData)
      .then((response) => {
        data = response.data;
      });
    return data;
  } catch (error) {
  ...
    }
  }
}

 

 

 

 

 

05. 한 번에 여러 파일 전송

---

서버측의 설계에 따라 아래와 같이 똑같은 name에 여러 개를 전송할 수 있습니다.

  /** 예를 들어, 현재 dataToSubmit.image : [이미지 파일, 이미지 파일, 이미지 파일...] */
  for (const imageFile of dataToSubmit.image) {
      formData.append("images", imageFile);
  }