[React] 이미지 업로드

리액트에서 이미지 업로드 하기 🤓

FileReader 사용

export default function App() {
  const [images, setImages] = useState([]);

  const handleChange = (e) => {
    e.preventDefault();
    
    const reader = new FileReader();
    const file = e.target.files[0];

    reader.onloadend = () => {
      setImages((prev) => [...prev, reader.result]);
    };

    reader.readAsDataURL(file);
  };

  return (
    <div className="App">
      <h1>Image Uploader</h1>
      <input type="file" onChange={handleChange} />
      <Images images={images} />
    </div>
  );
}

objectURL 사용

URL.creatObjectURL()은 object를 받아서, 임시적인 local URL을 생성한다. 그리고 그 url을 이미지의 src로 지정할 수 있다.

export default function App() {
  const [images, setImages] = useState([]);

  const handleChange = (e) => {
    e.preventDefault();
    const file = e.target.files[0];
    const fileUrl = URL.createObjectURL(file); // (*)
    setImages((prev) => [...prev, fileUrl]);
  };

  return (
    <div className="App">
      <h1>Image Uploader</h1>
      <input type="file" onChange={handleChange} />
      <Images images={images} />
    </div>
  );
}