파일업로드(+서버로 파일 저장하기)

요구사항

첫번째, 파일을 업로드 하기
두번째, 업로드 한 파일의 제목을 화면에 노출하기
세번째, 저장버튼을 누르면 파일(및 다른 입력 데이터들)을 저장하기

조건

첫번째, 파일 외에는 모두 json형태로 전송할 것
두번째, 프론트 데이터 구조는 총 3가지의 테이블의 데이터를 하나로 합쳐서 저장해야 함(ex. 입찰내역 테이블의 데이터, erp 테이블의 데이터, 입찰결과 테이블의 데이터)

스웨거(데이터 구조)

bidData = {
	"bidId" : string,
    "bidNo" : string,
    ...
    erpItems = {
    	"erpId" : string,
        ...
    }
 }
 grpType001
 grpType002
 grpType003

• 입찰내역, erp, 입찰결과 테이블의 데이터는 bidData안에 들어가 있으며, json구조로 전송해야함
• grpType001 ... 은 파일업로드 데이터임

문제점(나의 문제점)

첫번째, 파일을 통째로 어떻게 전달하지?
두번째, bidData만 어떻게 json형식으로 보내란거지?

해결하기

첫번째, 백엔드 선임님한테 물어봄
두번째, 백엔드 선임님과 함께 GPT에 물어봄
세번째, formData를 사용하라는 힌트를 얻음

• formData 메서드사용하기
• 나머지 데이터는 json 형식으로 전달하기(formData에 추가)
• body형식은 formData로 전달하기

const formData = new FormData();

formData.append("bidData", JSON.stringify(payload));

Object.entries(files).forEach(([key, file]) => {
      if (file) {
        formData.append(key, file);
      } else {
        console.warn(`파일이 없습니다: Key=${key}`);
      }
    });

 const response = await fetch(`${baseUrl}/...`, 		{
        method: "POST",
        body: formData,
      });

• 이렇게 하면 bidData는 json 형식을 formData에 담에서 전달되고, 파일을 통째로 formData에 담겨서 전달됨

회고

• 해보니깐 별거 아닌데 별거다.