[js & input file] 파일첨부 max 개수 이상이면 자르기(DataTransfer())

문제상황
file 첨부할때 3개 이상 첨부 시 3개까지만 잘라서 보여줘야 함.

input file의 change 이벤트 안에 files를 찍으니 fileList라는 Object로 들어와서 배열 이벤트로 잘라서 다시 넣으려고 했으나 수정이 불가.

예)
첨부: 사진1, 사진2, 사진3, 사진4, 사진5
보여줄사진: 사진1, 사진2, 사진3

해결방법
DataTransfer() 로 다시 배열을 재구성하여 this.files에 담아주기.

const maxLength = 3;
if (this.files.length > maxLength) {
	const transfer = new DataTransfer();
    Array.from(this.files) //새로 배열 만들 그릇
    	.slice(0, maxLength) //첫번째 인덱스부터 최대개수까지 자르기
        .forEach(file => {
        	transfer.items.add(file) //여기서 file 반복 돌려서 추가
        })
    this.files = transfer.files; //this.files 안에 다시 넣어주기
}