inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)

이미지별 업로드 현황 보여주기

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

230

현석오

작성한 질문수 53

0

안녕하세요 

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

 

질문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

aws mongodb nodejs react express lambda

답변 0

Router.use 두번째 파라미터 ImageRouter : undefined 전달 오류

0

126

2

소스코드 요청

0

164

1

프록시 관련 질문

0

168

1

Presigned URL 사용시 데이터베이스 저장 시점

0

335

1

이미지 등록시 자동 등록 오류

0

218

1

강의에 사용된 코드 다운 받는 사이트 주소 있나요?

0

389

2

axios 이용해서 백엔드로 이미지 전송 중 새로고침

0

476

1

ImageList 컴포넌트에서 업로드 한 사진을 리스트에서 바로 보기 위해 이 방법도 괜찮나요??

0

386

1

이미지 처음 올릴 때만 나타나는 오류

0

256

1

es6 스타일로 Import 할때 동작하지 않습니다.

0

393

1

이미지 업로드시

0

367

1

node js를 이용하고 mysql에 이미지 경로 저장

2

1263

1

선생님 cloudFront를 사용하게되면 S3는 private으로 사용하는게 좋을까요

0

545

1

선생님 aws-sdk 모듈을 찾을 수 없다고 합니다.

0

667

1

new aws.S3 version 확인

2

509

1

react-router-dom v6 useHistory 이슈

7

641

0

람다에서 시간 초과 에러가 뜹니다!

0

318

1

첫 로드시 동일한 이미지 두번호출

2

492

1

이미지 업로드 시 배열로

2

531

1

Promise.all에 대한 질문

0

431

1

세션에 관한 질문이 있습니다.

0

434

1

Promise.all관련 질문 ("여러 이미지 미리보기" 중...)

0

312

1

cdn 주소

0

510

1

특정 user 페이지 가져오기 질문있습니다.

0

297

1