2022.08.16 | Notion

이미지 미리 보기 구현 (이미지 여러개)
1. <input type=’file’ *multiple*/> 을 사용.
2. onChange event에 e.target.files 으로 접근
3. 실제 e.target.files 에 담기는 건 유사 배열 객체이다. ( 이미지가 한개여도 유사배열 객체에 담김 )
fileReader (이미지를 읽기위함) 사용법
1. 생성자 함수로 fileReader 객체를 만들어준다.
```
const reader = new FileReader();
```
1. readAsDataURL 메서드로 접근하여 파일객체(1개) 를 넘긴다.
```
const files = e.target.files;

reader.readAsDataURL(files[0])
```
객체가 아닌 유사 배열 객체를 넣으면 오류 발생

<aside> 💡 readAsDataURL 인자로는 파일 객체 한개만 넣어야한다.

</aside>
유사배열 객체( 예를들어 FileList) 에서 배열 메소드 사용하는법
1. Array.from 으로 얕은 복사를 이용하여 사용
```
const fileList = Array.from(files);
```
b. call, bind 를 사용하여 배열 메소드 사용
```
[].forEach.call(ele, function(element, index, array){
	console.log(element, index);
});

// element, index ...
```
왜 배열에 저장을하는데 순서가 다를까??

스크린샷 2022-08-16 오후 1.29.26.png