[React] FormData()사용 file 및 json, array 데이터 보내기

위 사진과 같이 파일과 파일에 해당하는 파일명, 설명, 태그 등 사용자에게 입력 받은 값을 서버로 전송해야할 일이 있습니다.

file 만 보내는글은 많지만 json까지 같이 보내는건 많지 않아서 작성해봅니다.

일반적으로 axios를 사용하여 body 부분에 json 형식으로 추가해서 보냈지만 file전송을 위해 FormData()를 사용했을 경우 body 부분에 json 형식의 데이터를 보낼 수 없습니다.

formData에 append()를 사용하여 file 및 json, array를 보내는 방법은 다음과 같습니다.

    /*FormData 변수 */
    const [file, setFile] = useState(null); // 파일 저장 할 State
  	 
    //파일 추가
    const handleChange = (file) => {
        setFile(file[0]);
    };

    //추가된 파일 전송 버튼 (전송 Button)
    const onHandlePost = () => {
        const formData = new FormData();
        formData.append("file", file);

        let jsonData = JSON.stringify({ title: "jsonTitle", tag: "jsonTag", content: "jsonContent" });
        let arrayData = ["arrayTitle", "arrayTag", "arrayContent"];

        formData.append("jsonData", jsonData);
        formData.append("arrayData", arrayData);

        if (file) {
            // 선택된 파일이 있는 경우에만
            console.log(formData);
            axios
                .post(`${API_SERVER}/api/files/uploadFile`, formData, {
                    headers: headers, // headers에 API 인증키 전달
                })
                .then((res) => {
                    console.log(res);
                    if (res.data) {
                        //success
                        alert("데이터 저장 성공");
                    } else {
                        //err
                         alert("데이터 저장 실패");
                    }
                })
                .catch((err) => {
                    //err
                     alert("에러 발생 : "+err);
                });
        } else {
            //파일 선택 안한 경우
        }
    };

array의 경우 append만 하면 바로 보낼 수 있지만 

JSON의 경우 JSON.stringify() 함수를 사용해야합니다.

사용하지않을경우 전송은 되지만 Server 단에서 [Object object] 이렇게 넘어와서 사용할 수  없습니다.

 

express에서 multer을 사용하여 FormData()를 받는 방법은 여기에 있습니다.

https://seung-min.tistory.com/45

[node.js] Client 한테 FormData() 전달받아 File 저장하기 (feat Multer..) File 및 Json 전달받기