업로드 기능 및 적용

해당 사진은 기존에 token값을 가진 사람의 RestAPI를 통해 image를 가져와 보여주었고
아래 파일 선택으로 원하는 파일을 선택 후 생성 부분을 누르면 서버에서의 image 링크가 바뀌게 된다.

코드

const Image = styled.img`
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: skyblue;
  background-image: url('${(props) => props.src}')
  background-size: 500px;
  background-repeat: no-repeat;
`

....


const HorizontalLoginForm = () => {
  const [form] = Form.useForm()
  const [, forceUpdate] = useState({}) // To disable submit button at the beginning.
  const [imageGetProps, setimageGetProps] = useState('')

  useEffect(() => {
    console.log('=== useEffect first ===')
    const fetchArticles = async () => {
      const articleData = await GetAuthUser()
      setimageGetProps(articleData)
    }
    fetchArticles()
  }, [])
  
  
  ....
  
  return <Div>
          <Image src={imageGetProps}></Image>
          <input
            type="file"
            className="imgInput"
            accept="image/*"
            name="file"
            onChange={onImgChange}
          ></input>
        </Div>

        <Div>
          <Button type="primary" onClick={PostUploadPhoto}>
            생성
          </Button>
        </Div>

간단히 3부분으로 나뉜다.
처음 imageGetProps를 src에 넣고
해당부분은 처음 동작할때 useEffect를 통해 GetAuthUser를 통해 가져온 imageUrl을 받아 setimageGetProps(articleData)를 실행하여 imageGetProps의 부분을 링크를 부여하여 처리한다.
그외에는 onImgChange를 통해 이미지를 담고 PostUploadPhoto를 통해 서버로 전송해주는 역할을 한다.

useState / useEffect

처음실행시 useEffect에 대상 링크를 넣어놓고 useState로 받아 왔고 해당 링크를 src에서 적용되게한다. (해당 부분은 styled 컴포넌트와 연관되어 처리된 것을 볼 수 있다. )

실습하기

파일을 선택하여 김세정.jpg를 가져와 생성버튼을 누르고
이미지 업로드가 완료된다.

다시 새로고침하면 해당 김세정 이미지로 처리된 것을 받아온 것을 확인 할 수 있다.

나중에나 보충 해야할 것

이미지가 파일선택후 해당 선택한 파일로 동그란 부분이 보이게 하고 싶으나
해당 부분은 좀 File을 src로 바꾸는 작업이 필요해서 오래 걸릴 것 같다.