FormData

🟢 formData란?

웹 양식의 데이터를 쉽게 처리하고, 서버로 전송할 수 있는 key-value 쌍의 collection을 제공하는 Web API 이다.

let formData= new FormData([form]);   // 생성자

 

🔵 사용하는 이유 ?

- key:value 쌍의 데이터를쉽게 추가, 삭제, 조회할 수 있는 method가 내장되어 있다.

- multipart 인코딩 지원 : 웹 클라이언트가 요청을 보낼 때 http 프로토콜의 body 부분에 데이터를 여러 부분으로 나눠서 보내는 것으로 파일과 같은 바이너리 데이터를 전송하는데 적합하여, 웹 개발자들이 파일 업로드를 쉽게 구현할 수 있다.

- 호환성 : FormData 는 대부분의 최신 웹 브라우저에서 지원이 된다.

🟣 대체 방법

데이터를 JSON형식으로 직렬화하여 전송 : 텍스트 데이터를 주고받을땐 용이하다.

 

🟡 사용 예시

Front Code

  const formData = new FormData();
    formData.append("image", file);
    for (const [key, value] of formData.entries()) {
      console.log(`${key}:`, value);
    }

    try {
      console.log(formData);
      const response = await upload(formData);
      console.log(response);
    } catch (error) {
      console.error("Error uploading image:", error);
    }

Front (api) Code

export const upload = async (formData: FormData) => {
  console.log("폼데타");
  return await request.post("/upload", formData);
};

Server Code

app.post("/api/upload", upload.single("image"), (req: MulterRequest, res) => {
  console.log(req.body);
  console.log(req.file);
  if (!req.file) {
    return res.status(400).json({ error: "No file was provided" });
  }

  console.log(req.file.location);
  //DB 추가
  res.status(200).json({ location: req.file.location });
});

form의 data를 formData 객체로 생성하고, 이를 fetch 함수, post 등 여러 함수로 전송할 수 있다.

위의 api code에서 formData 를 넘겨주게되면 아래처럼 정상적으로 출력이 된다.

req.body

req.file

formData를 넘겨주지 않으면 body와 file 두 값이 다 undefined 가 출력이 된다.

여기서 드는 의문은 req.body 와 req.file로 왜 어떻게 나눠지게 되는 것인가 이다. 

🟠 Multipart

formdata를 서버로 전송하면 일반적으로 multipart 형식으로 인코딩된 데이터를 받게 되는데, req.body와 req.file은 server side 에서 formData 를 처리하는 데 사용되는 두 가지의 일반적인 속성이다.

- req.body : 폼에서 전송된 텍스트 데이터를 포함한다. 입력 필드에 입력된 값들을 서버에서 처리할 때 사용되며 middleware 가 formData 를 파싱하고 인코딩된 텍스트 데이터를 js 객체로 변환하여 req.body 에 할당한다.

- req.file : form에서 전송된 파일 또는 바이너리 데이터를 포함한다. 파일 업로드와 같은 작업을 서버에서 처리할 때 사용된다. 미들웨어가 멀티파트 인코딩으로 전송된파일을 처리하고, 파일에 대한 메타데이터와 함께 파일의 내용을 req.file에 할당한다.

parsing : 구문분석. 문장을 그것을 이루고 있는 구성 성분으로 분해하고 그들 사이의 위계 관계를 분석하여 문장의 구조를 결정하는 것 , 일련의 문자열을 의미있는 token(어휘 분석의 단위)으로 분해하고, 그것들로 이루어진 parse tree를 만드는 과정이라고 한다.

 

🟠 console.log

위 내용까지 공부했다면 front에 있는 코드 중

   for (const [key, value] of formData.entries()) {
      console.log(`${key}:`, value);
    }

이 부분이 의아할 것이다. 그냥 console.log(formdata) 때리면 안되는 건가?
위 궁금증의 해답은 빈 객체만 반환받는다. 이유는

위에서 얘기한 것처럼 formData 는 일반객체가 아니라 multipart encoding 형식이기에 로깅(로그를 기록하는 행위)이 되지 않는다.

따라서 .entries() 메소드를 사용하여 위처럼 출력해보면

폼데타 이후 key 와 value가 정상적으로 출력되는 것을 볼 수 있다.

폼데타 윗줄은 단순 console.log를 찍었을 때 이다.

나는 formData 를 가지고 server에서 작업할 때 생각처럼 잘 되지 않자 formdata 를 출력해보는 것부터 error 를 추적했는데 빈 값이 담기는 것을 보고 formData가 정상작동을 하지 않는 줄 알았다. 많이 고생했다.

 

🔴 Reference

https://ko.javascript.info/formdata    => ko.js.info