formdata

Question

const PostForm = () => {

const { imagePaths, addPostDone } = useSelector((state) => state.post);

const dispatch = useDispatch();

const [text, onChangeText, setText] = useInput('');

useEffect(() => {

if (addPostDone) {

setText('');

}

}, [addPostDone]);

const onSubmit = useCallback(() => {

if (!text || !text.trim()) {

return alert('게시글을 작성하세요.');

}

const formData = new FormData();

imagePaths.forEach((p) => {

formData.append('image', p);

});

formData.append("name", "contentUpload");

console.log(formData);

}, [text, imagePaths]);

const imageInput = useRef();

const onClickImageUpload = useCallback(() => {

imageInput.current.click();

}, [imageInput.current]);

const onChangeImages = useCallback((e) => {

console.log('images', e.target.files);

const imageFormData = new FormData();

[].forEach.call(e.target.files, (f) => {

imageFormData.append('image', f);

});

imageFormData.append("name", "imageUpload");

console.log(imageFormData);

dispatch({

type: UPLOAD_IMAGES_REQUEST,

data: imageFormData,

});

}, []);

hm_stom · Answer

해결했습니다! 제가 치명적인 실수를 했네요 저와 같은 실수를 하시는분들을 위하여 올릴게요 formData안에 내용물들이 궁금하여 console로 출력 하는 경우에는 빈객체{}가 나옵니다. 이유는,  FormData는 XMLHttpRequest를 사용해 전송할 key/value와 같이 쌍을 이뤄 컴파일한 "특수한 객체"이기 때문에, 문자열로 표현할 수 없어서 빈 객체가 나옵니다. 반드시 내용물을 찍어볼 때  "for ...of "를 통하여 내부를 확인하시길 바랍니다!