react로 이미지 업로드 구현하기

image는 file이기 때문에, input 태그를 사용하여 업로드할 수 있다.

 

 

단일 이미지

input type='file'

- accept는 업로드 할 수 있는 파일 확장자이다. 

 

<div>
  <input type='file' 
      accept='image/jpg,impge/png,image/jpeg,image/gif' 
      name='profile_img' 
      onChange={onChange}>
  </input>
</div>

 

다음과 같이 파일을 입력받아 FormData 객체에 집어넣어 파일을 손쉽게 전송할 수 있다.

 

 

FormData

: formData 는 내가 지정한 key값과 파일을 value로 삼아 데이터 및 파일 전송을 손쉽게 해주는 객체이다. 

const onChange = (e) => {
    const img = e.target.files[0];
    const formData = new FormData();
    formData.append('file', img);
}

 

 

다중 이미지

input[type="file" multiple]

 

: 미리보기 기능은 위의 결과값에서 없는 상대경로를 알아내야하기 때문에 까다롭다. 

-  URL.createObjectUrl() 메소드를 사용

 <input
   type="file"
   multiple
   accept="image/jpg,image/png,image/jpeg,image/gif"
   onChange={handleImageUpload}
 />

 

- input[type="file"]의 디자인을 바꾸기 위해서 label 태그를 사용한다.
- label 태그에 onChange 이벤트를 등록한다.
- onChange의 event객체를 이용해서 이미지 데이터들을 받아온다.
- 받아온 이미지들을 순회하면서 URL.createObjectUrl()의 매개변수로 이미지를 넣고 상대경로를 반환 받는다.
- 반환 받은 상대경로를 배열로 관리하고 useState를 통해 데이터를 관리한다.
- 상대경로를 가지고 있는 배열을 순회하면서 img태그의 src 속성에 값을 할당하고 렌더링 시킨다.

 

 

const Images = () => {
  const [showImages, setShowImages] = useState([]);

  // 이미지 상대경로 저장
  const handleAddImages = (event) => {
    const imageLists = event.target.files;
    let imageUrlLists = [...showImages];

    for (let i = 0; i < imageLists.length; i++) {
      const currentImageUrl = URL.createObjectURL(imageLists[i]);
      imageUrlLists.push(currentImageUrl);
    }

    if (imageUrlLists.length > 10) {
      imageUrlLists = imageUrlLists.slice(0, 10);
    }

    setShowImages(imageUrlLists);
  };

  // X버튼 클릭 시 이미지 삭제
  const handleDeleteImage = (id) => {
    setShowImages(showImages.filter((_, index) => index !== id));
  };

  return (
    <div className={classes.addPicture}>
      <label htmlFor="input-file" className={classes.addButton} onChange={handleAddImages}>
        <input type="file" id="input-file" multiple className={classes.addButton} />
        <Plus fill="#646F7C" />
        <span>사진추가</span>
      </label>

      // 저장해둔 이미지들을 순회하면서 화면에 이미지 출력
      {showImages.map((image, id) => (
        <div className={classes.imageContainer} key={id}>
          <img src={image} alt={`${image}-${id}`} />
          <Delete onClick={() => handleDeleteImage(id)} />
        </div>
      ))}
    </div>
  );
};

 

 

출처

https://velog.io/@min1378/React-image-%EC%97%85%EB%A1%9C%EB%93%9C

React image 업로드

https://hyunsix.tistory.com/entry/React-input%ED%83%9C%EA%B7%B8%EB%A1%9C-%EC%82%AC%EC%A7%84-%ED%8C%8C%EC%9D%BC-%EC%97%AC%EB%9F%AC%EA%B0%9C-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0-%EA%B0%80%EB%8A%A5%ED%95%98%EA%B2%8C-%EB%A7%8C%EB%93%A4%EA%B8%B0

[React] input태그로 사진 파일 여러개 업로드하기 + 브라우저에서 미리보기 가능하게 만들기

https://velog.io/@jkl1545/%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%8B%A4%EC%A4%91-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%B0%8F-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0

이미지 다중 업로드 및 미리보기