리액트 이미지 업로드 미리보기 구현

2달 전

이미지 업로드 미리보기 구현하기

이미지 하나 올리기

type=file인 Input을 생성 후 onChange 이벤트의 핸들러를 생성해 준다.

업로드 한 대상은 event 객체의 target.files에서 얻을 수 있고,

FileList의 ArrayLike 객체로 반환된다.

미리보기 이미지를 얻기 위해선 FileReader 객체의 도움이 필요하다.

FileReader의 readAsDataURL 메서드로 파일 타입을 읽고 onLoad 이벤트를 통해 읽은

값을 얻을 수 있다.

코드

const [imagesPreview, setimagesPreview] = useState<string[]>([]);

const handleUploadImage = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;

    if (files && files?.length > 0) {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(files[0]);

      fileReader.onload = (e) => {
        const imageDataURL = e.target?.result?.toString()!;
        setimagesPreview((prev) => [...prev, imageDataURL]);
      };
    }
  }, []);

여러 이미지를 올릴 때

const handleUploadImage = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;

    function readAndPreview(file: File) {
      if (/\.(jpe?g|png|gif|webp)$/i.test(file.name)) {
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file);

        fileReader.onload = (e) => {
          const dataURL = e.target?.result?.toString()!;
          setimagesPreview((prev) => [...prev, dataURL]);
        };
      }
    }

    if (files && files.length > 0) {
      [].forEach.call(files, readAndPreview);
    }
  }, []);