이미지 업로드 질문

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

해결된 질문

작성

206

  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

John Ahn

지식공유자

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

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

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

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

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

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

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

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

화이팅

질문자

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

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

이미지 업로드 질문