inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

이미지 업로드 질문

해결된 질문

252

화이팅

작성한 질문수 3

0

  const dispatch = useDispatch();
  const [Image, setImage] = useState("");

  const fileupload = (files) => {
    let formData = new FormData();

    const config = {
      header: { "content-type": "multipart/form-data" },
    };
    formData.append("file", files[0]);

    dispatch(imageupload(formData, config)).then((response) => {
      if (response.payload.success) {
        console.log(response);
        setImage(response.payload.filePath);
      } else {
        alert("파일을 저장하는데 실패했습니다.");
      }
    });
  };

  return (
    <Dropzone onDrop={fileupload}>
      {({ getRootProps, getInputProps }) => (
        <div
          style={{
            width: "300px",
            height: "300px",
            borderRadius: "50%",
            border: "1px solid",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
          {...getRootProps()}
        >
          <input {...getInputProps()} />
          {Image && (
            <img
              style={{ minWidth: "300px", width: "300px", height: "240px" }}
              src={`http://localhost:5000/${Image}`}
            />
          )}
        </div>
      )}
    </Dropzone>

GET http://localhost:5000/uploads/1588870136518_d.gif 404 (Not Found)

이렇게 에러 메세지가 나오네요.... 경로 지정 되는 기준이 어떻게 되나요??

배포 까지해서 제작중인데 이 방법으로 해도 되는건가요?

redux react nodejs mongodb 웹앱

답변 2

1

John Ahn

이건  Node js 에서    그 Static 한 파일을 어떻게  보이게 할건지를 설정하느냐에 따라 달라집니다 

혹시   server/index.js  파일 봐보시면  

아마 이렇게 되있을거에요  ~ 

app.use('/uploads', express.static('uploads'));

이뜻은   uploads 폴더 안에 있는 파일들을   localhost:5000/"uploads"/  => 이런식으로 표출할수 있게 만드는 것이에요.

Not Found가 나온다는건   지금   Image가  uploads 폴더안에 없어서 그런것 같은데  

혹시 uploads 폴더 안에 이미지가 잘들어가 있나요 ?

배포 할때는    도메인에 따라서  localhost 부분을 바꿔주시면 됩니다 ^^ 

0

화이팅

항상 답변 주셔서 감사합니다 ㅎㅎㅎㅎㅎ 나중에 웹팩 이나 next는 강의 예정 없으신가요

강의 내용은 훌륭하나, 환경 설정 오류 때문에 진도를 나갈 수 없습니다. 20년 버전 강의.

0

60

1

강의자료는 어디서 볼 수있나요??

0

66

1

이 쇼핑몰 만들기 강의는 관리자페이지 만드는건 없나요

0

114

2

웹에서 실시간 코드반영이 안돼요

0

120

1

app.use질문

0

64

1

강사님께 어떻게 직접질문할수있어요??

0

76

1

const함수같은거 기초강의는 어디있나요

0

81

2

리덕스 참조챕터가 어딨어요? 미리듣고오라는데요

0

81

2

강의가완전 오래되서 다 틀리네 app.jsx도 tailwind css 다틀림 무책임함

0

68

1

개발자도구에 redux란이 없어요

0

88

1

npx tailwindcss init -p 에서 계속 에러나요

0

92

1

쇼핑몰기능중 찜하기 기능은 어떻게 구현하나요

0

139

2

강의하다 줌으로 설명가능한지좀 정확히 알려주세요. 이 선생님 정책이 어떻게 되는데요. 직접 연락할 메일이라도 알려주세요

0

43

1

도표 강의 자료 열람 불가능

0

109

1

tailwindcss를 vite에서 이용하는 방식이 바뀐것 같습니다.

0

1132

2

eslint 설정 후 오류가 납니다.

0

223

1

오버로드 오류

0

150

1

VSCode에서 save를 할 때, landingpage의 useEffect가 실행되는 문제에 대하여

0

169

1

dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제

0

228

2

logout할 때, server로 요청을 보내서 authUser middleware를 통과하도록 하는 이유?

0

195

1

webkit-text-size-adjust 오류

0

315

1

does not provide an export named 'userReducer'

0

217

2

빌드 배포

0

140

1

삭제 예정 강의는 언제 삭제 되나요? 저것때문에 수강완료를 못하면 회사에서 비용을 청구한다고 합니다~

0

220

2