[Multer Error] 이미지 업로드 에러

<server/index.js>에 아래 코드 추가

 

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

 

<client/src/components/ImgUploadForm/ImgUploadForm.js>에 아래 코드 추가

 

useEffect(() => {
    console.log(imageUrl);

  }, [imageUrl])

  return (
    <>
      <form encType="multipart/form-data" style={{ display: "inline" }}>
        <input
          type="image"
          src={`http://localhost:4000/${imageUrl}`}
          value=" "
          style={{ width: "80px", height: "80px", border: "2px solid" }}
        />
        <input
          type="file"
          accept="image/*"
          name="profile"
          style={{ fontSize: "10px" }}
          onChange={(e) => setFile(e)}
        />
      </form>
    </>
  );
}

 

useeffect부분에서

src={imageURl} 를 src={`http://localhost:4000/${imageUrl}`} 로 바꿔준다.

그리고 사용자가 이미지를 넣지 않았다면 기본이미지가 뜨도록 하였기 때문에 uploads 폴더에 기본이미지 저장해두었다.

 

---

원래는 기본이미지에서 사용자가 이미지를 바꾸면 액박현상이 발생하였다. 그래서 구글링을 하다가 위 방법을 발견해서 코드를 수정하여 해결하였다.