이미지 여러개 미리보기 - FileReader 예제

FileReader를 사용하여 이미지를 읽어와 미리보기를 띄어보겠다. 

https://mhypro.tistory.com/64

이미지 미리보기 - FileReader 객체 사용하기(공식문서 파헤치기)

 

이 포스팅을 이어서 시작하겠다. 

 

일단 전체소스코드

import React, { useState } from 'react';

function App() {
  let [newfile , setNewfile] = useState([])
  const fileOn = (e)=>{
    const Files = e.target.files; // files 
    let file = [];

    for(let i=0; i < Files.length; i++){
      let reader = new FileReader();  
      reader.readAsDataURL(Files[i]);
      reader.onload = ()=>{
        file[i] = reader.result;
        setNewfile(file);
      }
    }
}
  return(
    <div>
      <input multiple type='file' accept='image/png' onChange={(e)=>{fileOn(e)}}/>
      {
        newfile.map((element , index)=>{
          return(
            <img key={index} width={'300px'} src={element}></img>
          )
        }) 
      }

    </div>
  )
}



export default App;

정말 간다하다. e.target.files의 length를 이용하여 반복문을 돌면서 파일 하나하나FileReader를 사용해서 데이터를 읽어서 newfile에 차곡차곡쌓아준다. 쌓으면서 newfile은 업데이트되면서 JSX는 렌더링이될것이다. 

 

FileReader 첫번째 포스팅에서 너무 많은것들을 설명해서 여기서는 예제만 풀어보았다.