이미지 업로드를 리액트 드롭존으로 구현하려고 하는데 잘안되서요

안녕하세요

김시훈 강사님 질문이 있습니다.

질문1

메인 페이지의 파일 업로드 컴퍼넌트 로직이 좀 이상해서 봐주시면 감사요 특히 폼데이터 설정 부분이 폼 데이터를 지우고 다시 설정하는데

좀더 좋은 방법이 있을까요?

    // set file data to form Object and axios request to file upload to server
    const onSubmit = async (e) => {
        e.preventDefault()
        console.log('submit 함수 실행 check')
        const formData = new FormData()

        // if (files != null) {
        //     console.log("files : ", files);
        //     for (let file of files) {
        //         formData.append("image", file);
               
        //     }
        // } else {
        //     alert("파일을 선택해 주세요");
        //     return;
        // }

        try {

            await Promise.all(
                [...files].map((file, index) => {
                    formData.delete('image');
                    formData.append("image", file);

                    const res = axios.post("/upload", formData, {
                        headers: { 'Content-Type': 'multi/form-data' },
                        onUploadProgress: (e) => {
                            setPercent((prevData) => {
                                const newData = [...prevData];
                                newData[index] = Math.round((100 * e.loaded) / e.total);
                                return newData;
                            })
                        }
                    })
                    console.log({ res })
                })
            )

            await toast.success('success!!')

            setTimeout(() => {
                setPercent([]);
                setFileNames([]);
            }, 2000)

        } catch (err) {
            toast.error('fail!')
            console.log(err)
        }
    }

질문2

드롭존 페이지에서 파일 업로드가 안되는데 원인을 잘 모르겠습니다

한번 봐주시면 감사하겠습니다.

github:

https://github.com/hyunsokstar/making-daum-file-upload

server 실행 명령어

npm run dev

front 서버 실행 명령어

npm start

main page:

http://127.0.0.1:3000/main

dropzone page:

http://127.0.0.1:3000/dropzone

노트 정리:

http://www.skilnote-for-react.co.kr/wm/myshortcut/making-daum-file-upload/27

인프런 커뮤니티 질문&답변