[vuejs] <input> 태그의 type이 file일 때, 해당 첨부파일 정보 가져오기

<input> 태그의 type이 file인 경우 v-model을 쓰면 eslint가 아래와 같은 오류 메시지를 뿌려준다.

 

v-model directives don't support 'file' input type

 

type이 file인 경우

특정 이벤트 실행 시 해당 정보를 가져오고 싶다면 v-model 대신 @chnage를 쓰면 된다.

 

<input type="file" @change="onFileChange($event.target)" />

const onFileChange = (target) => {
  console.log('target', target.files);
};

 

 

그럼 이렇게 FileList 유형의 객체에 담기게 된다.

 

 

그러나, 해당 객체를 깊은 복사하여 vue의 state 변수에 담으려고 했으나 복사가 되지 않았다.

찾아보니 이벤트 객체 FileList는 기본 객체 또는 배열이 아닌 file 객체를 여러개 담고있는 유사배열 객체(array-like objects)란다.

 

유사배열 객체는 배열같이 생겼으나 객체인 ... 이상한 놈이며, 배열의 forEach, map, filter같은 메서드를 사용할 수 없다.

이놈을 배열로 바꿔주기 위하여서는 아래의 메서드를 이용하여야 한다.

 

Array.from()

const onFileChange = (target) => {
	//state.fileList = JSON.parse(JSON.stringify(target.files)); (X)
	state.fileList = Array.from(target.files);
	console.log(state.fileList);    
};

 

state.fileList는 미리 선언해둔 setup의 빈 배열이다.