inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

이미지 업로드 전 미리보기 기능 만들기

onSubmit 이미지 업로드에서 업로드 성공 또는 에러 메세지가 발생되지 않습니다

해결된 질문

249

즐거운 갈매기

작성한 질문수 4

0

일단 저는 node.js 서버 환경이 아닌 Springboot 서버 환경이고 front에서 http://localhost:8080/images api로 이미지를 잘 전달 합니다! 그런데 한 번 전달하게 되면

이미지 성공 toast알림이 뜨지 않고 또한 다시 초기화를 해주는 쪽 블럭으로 넘어가지 않는 것 같습니다

코드는 강사님꺼 그대로 가져다 사용하였고 server쪽 url 호출시 cors문제가 있어서 package.json에 proxy 설정해주었고 백엔드 서버에 1번은 제대로 가져오는 것까지 확인하였습니다. < 이게 백엔드에서 file에 대한 정보 찍어봤을 때 나온 결과값입니다.

import React, { useState } from 'react'
import { toast } from "react-toastify"
import axios from 'axios';

... [생략]

  const onSubmit = async (e) => {  
    e.preventDefault(); 
    const formData = new FormData();  
    formData.append("image", file)
    console.log(formData);
    try {
      const res = await axios.post("http://localhost:8080/images", formData,{
        headers: { "Content-Type" : "multipart/form-data" },
        onUploadProgress: (e) => {
          setProgress(Math.round(100 * e.loaded/e.total));
        },
      });
      toast.success("success!!  이미지 업로드 성공");
      setTimeout(() => {
        setProgress(0);
        setFileName(defaultUpload);
        setFileUrl(null);
      }, 3000);
    } catch (error) {
      toast.error(error.message);
      setProgress(0);
      setFileName(defaultUpload);
      setFileUrl(null);
      console.error(error);
    }
  }

왜 try 부분에서 성공시/에러시에 대한 아웃풋을 넘겨주지 않는지 잘 모르겠습니다 ㅠ 답변 부탁드릴게요

현재까지 수강중인 내용은 db를 통해 이미지 정보 저장하기까지 들었습니다

express react nodejs mongodb aws lambda

답변 1

0

김시훈 (도도소프트)

어디까지 실행되는지 확인해보셨나요?

간단하게는 중간중간에 console.log로 중간값들을 찍어서 확인해볼 수 있어요. 어디서 막혔는지 혹은 어디에 값이 잘못 나왔는지

0

즐거운 갈매기

파일 이미지 업로드 이벤트 핸들러에서 log찍었을때

파일 잘 가져오고

upload버튼 눌러서 폼데이터 submit해주는 이벤트 함수에서 formdata log를 찍었을때 console에 로그가 찍히는 것을 확인하였으나

업로드 성공 또는 실패에 대한 피드백을 던져주는 블럭에 아예 가지 않는 것 같습니다

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

0

107

2

소스코드 요청

0

153

1

프록시 관련 질문

0

151

1

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

0

322

1

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

0

211

1

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

0

373

2

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

0

471

1

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

0

377

1

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

0

250

1

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

0

382

1

이미지 업로드시

0

359

1

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

2

1258

1

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

0

539

1

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

0

663

1

new aws.S3 version 확인

2

506

1

react-router-dom v6 useHistory 이슈

7

636

0

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

0

315

1

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

2

485

1

이미지 업로드 시 배열로

2

524

1

Promise.all에 대한 질문

0

421

1

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

0

428

1

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

0

303

1

cdn 주소

0

502

1

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

0

289

1