[VUE] 파일 첨부 > 같은 파일 첨부 - 배열 비워주기!

 

for (var pair of formData.entries()) {
    console.log(pair[0] + ': ' + pair[1]);
}

 

 

 

상황:

입력 모달창 오픈 > 파일 찾기 a파일 첨부 > 등록하지 않고 모달창 닫기

모달창 오픈 > 파일 찾기 a파일 첨부 :: 이 때 문제 발생

 

나는 부트스트랩을 사용하고 있었고, 부트스트랩뷰가 아닌 뷰로 쓰고 있었는데

제대로 들어갔는지 확인하려고 찍어본 부분이다

 

var formData = new FormData();
    formData.append('data', JSON.stringify(this.form));
    $.each(this.file, function (idx, data) {
        formData.append('fileId', data);
    });

 

위 코드는 여러개의 파일인 경우 쓰는 방법인데,

 

<FormData는 웹 애플리케이션에서 폼 데이터를 쉽게 생성하고 제어할 수 있는 인터페이스입니다. 이를 사용하여 폼 필드와 해당 값을 캡처하고, 이 데이터를 서버로 전송하거나 다른 작업을 수행할 수 있습니다.라고 챗 GPT가 알려줌>

출처 입력

나는 하나의 파일만 쓸거라서

let self = this;
let tepFile= this.$refs.ref이름.files[0]; // 첫 번째 파일만 처리

self.file = tepFile; // 파일을 덮어씁니다.
this.$refs.ref이름.value = ''

 

이렇게 하여 임시 변수에 0번째 파일을 저장해주었고,

내가 쓰는 변수에 다시 저장해주었다

: 임시 변수에서 지역 데이터변수에 저장해준 이유는 파일 유효성 검사 체크를 했기 때문이었는데 지금 생각해보면 안해도 됐을 것 같기도 하고..

 

무튼 파일 검사끝나고 나서는 refs에 있는걸 비워줘야 함

파일 첨부는 보통 change를 사용하는데, change는 같은 파일을 연속으로 올리는 경우에 처리를 해주지 않음