input image 미리보기 구현하기

Prerequisites

• useRef
• typescript
• FileReader Object

Code

import React, { useRef } from 'react';

const Test3 = () => {
  const imgRef = useRef<HTMLImageElement>(null);

  const readImage = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files?.length) return;

    const imageFile = e.target.files[0];
    const reader = new FileReader();

    reader.addEventListener('load', (e: ProgressEvent<FileReader>) => {
      if (!e || !e.target) return;
      if (typeof e.target.result !== 'string' || !imgRef.current) return;

      imgRef.current.src = e.target.result;
    });

    reader.readAsDataURL(imageFile);
  };
  return (
    <div>
      <input type="file" onChange={(e) => readImage(e)} accept="image/*" />

      <div style={{ marginTop: '10px' }}>
        <img ref={imgRef} width={'auto'} height={100} alt="img" />
      </div>
    </div>
  );
};

export default Test3;

 

FileReader.readAsDataURL()

readAsDataURL 메서드는 Blob 또는 File 의 컨텐츠를 읽기 위한 FileReader의 메서드입니다.

Note: The blob's result cannot be directly decoded as Base64 without first removing the Data-URL declaration preceding the Base64-encoded data. To retrieve only the Base64 encoded string, first remove data:*/*;base64, from the result.

결과 보기