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

FileReader 객체는 파일을 읽어들어와주는 API이며 , 읽어드린파일 데이터는 개발자가 사용할 수 있다. 

일단 공식문서를 토대로 정리할거니 공식문서를 올리겠다.

 

https://developer.mozilla.org/ko/docs/Web/API/FileReader

FileReader - Web API | MDN

 

일단 파일을 넣어야되기때문에 웹에 input태그를 이용해서 띄어보겠다. 

 

<input multiple type='file' accept='image/png' onChange={(e)=>{fileOn(e)}}/>

input태그의 속성은 type은file  , multiple을 넣어서 여러파일을 받을 수 있도록 해주었고 , accept속성은 파일의 확장자를 조정할 수 있다. image/png는 png파일만 받겠다는거다. image/* 해주면 모든이미지파일이 가능하다. 그리고 파일을 올렸을때의 이벤트함수로 onChange에 fileOn함수를 넣어줬다. 

 

이제 fileOn함수를 만들어보자.

생성자를 어떻게 만드는지 공식문서에서 가져와봤다.

 

일단 파일을 하나 불러와서 읽어드리고 파일의 데이터를 출력해보겠다. 

  const fileOn = (e)=>{
    const Files = e.target.files; // files 
    
    let reader = new FileReader();

    reader.readAsDataURL(Files[0]); //-> 어떤형식으로 만들거냐
    reader.onload = ()=>{
      console.log(reader.result);
    }

  }

코드한줄한줄 설명하겠다.

 

1. const Fiiles = e.target.files -> input창에서 온 파일을 배열형태로 e.target.files에 담기게된다. 

2. let reader = new FileReader() -> FilReader()를 사용하기 위해 생성해주었다. 

3. reader.readAsDataURL(Files[0]);  -> readAsDataURL은

이런특징을 가지고있지만 번역이 뭣같에서 내가 설명하겠다. (데이터포멧을 정하는거임)

저기서 blob은 파일류의 미가공데이터라고 한다. 그 데이터를 readAsDAtaURL메서드를 통해서 가공하여 <img src=??> src에 삽입해서 사용할 수 있다. 그리고 reader.result에는 가공된 데이터가 들어가있다. 

 

4. reader.onload = ()={}  ->  onload함수는 파일이 읽어진게 성공할시 실행되는함수이다. 여기선 콘솔의 파일의 데이터를 띄어보았다.

 

실행

코드를 실행해보겠다.

input 박스에 png파일을 올리면 data가 잘 출력된다. 이제 이 데이터를 이용해 img태그에 삽입하여 이미지를 미리보는형식으로 해보자. 

일단 저 데이터를 담아줄 useState가 필요할거 같다.

 

  let [img , setImg] = useState('') //추가된코드

  const fileOn = (e)=>{
    const Files = e.target.files; // files 

    let reader = new FileReader();

    reader.readAsDataURL(Files[0]); //-> 어떤형식으로 만들거냐
    
    reader.onload = ()=>{
      console.log(reader.result);
      setImg(reader.result); // -> 이미지를 state에 저장.  //추가된코드
    }
  }

useState를 선언하고 

reader.onload에서 데이터읽는게 성공될때 setImg로 state를 바꿔준다. 

<img width={'300px'} src={img}></img>

JSX - input태그 밑에 img태그를 하나 추가해주자 src는 state변수 이다 .

 

사진도 나오고 데이터도 나오는걸 볼 수 있다. 

이렇게 파일을 올리면 파일데이터를 추출해서 미리보기를 띄울 수 있다. 

 

FileReader객체의 몇개의 메서드와 속성들을 사용해봤다. 다른속성과 메서드를 설명하겠다.

reader.error 파일오류가 나타나면 해당오류를 띄어준다.

reader.readyState 파일의 상태를 체크할 수 있다. 

    setInterval(()=>{
      console.log(reader.readyState)
    },1)

0.001초 마다 체크해서 확인해보면 데이터가 어떤 상태인지 볼 수 있다.

reader.result 는 데이터가 들어가는데 readAsDataURL을 우리가 해준것처럼 데이터포멧을 정해주어야 사용이가능해지는거다.

이벤트 핸들러는 번역이 잘 되어있는거같다 ^^ onload = ()=>{}이렇게 함수넣듯이 사용하면 된다. 

 

그다음 메서드를 한번 알아보자.

abort

reader.abort()는 읽기 요청을 중단한단다. 하지만 중단이되도 리턴값으로는 DONE이 리턴된다는데 DONE은 readyState의 2번이다. (모든읽기요청이완료됨).

 

readAsArrayBuffer

이건 왜 번역이안되지? 내가 해보았다. - 지정된 Blob의 내용을 읽기 시작하고 완료되면 결과 속성에 파일 데이터를 나타내는 ArrayBuffer가 포함됩니다. 이게 파일데이터를 Array로 뱉어내는데. 테스트해서 출력해보겠다. 

reader.readAsArrayBuffer(Files[0]);

데이터가 다 쪼개져있다. 영상이나 , 오디오등의 데이터를 다룰때 유용할거같다. 이걸 사용하는것도 포스팅하겠다. 

 

readAsBinaryString 

음.. 이건 바이너리 데이터로 파일의 원시 이진 데이터가 문자열로 리턴된다고 한다. 속도에 유용할거 같다.

 

readAsDataURL

지정된 Blob의 내용 읽기를 시작하고 완료되면 결과 속성에 파일의 데이터를 나타내는 data: URL이 포함됩니다.

우리가 위에서 이미지를 데이터를 다루기위해 사용한 메서드이다.  base64로 인코딩된는데 base64가 궁금하면 구글링해보셈

 

readAsText

지정된 Blob의 내용 읽기를 시작합니다. 완료되면 result 속성에 파일 내용이 텍스트 문자열로 포함됩니다.

데이터를 텍스트문자열로 읽어드린다. 근데 출력해보면 문자열이 엄청 깨져있다. 인코딩이되지 않아서 이다.

 

 

 

이정도면 FileReader를 세밀하게 알아본거같다. 이제 응용하여 다음포스팅에는 여러이미지를 미리보기되는 기능을 만들어보겠다