파일 업로드 확장자 제한, 같은 파일 첨부 막기

다 쓰고 나니 뭘 당연한걸 썼나 싶네 .. 첨 알았을 땐 좀 놀랐음 ㅠ

 

지금까지 거의 단순 조회하는 업무만 하다가 파일 업로드를 맡으니 당황..  알고보니 간단한 작업이었다 ㅠㅋㅋㅋ

역시 선 취업 후 공부의 폐해

내 업무 : 파일 보내기 기능 구현 - 파일 확장자 제한하기 (엑셀만) - 같은 파일 연속 첨부 가능하게 하기

 

api 등록하는 것부터 멘.붕이었다. 지금까지 그냥 이런식으로 등록함 ...

요청하기: (params) =>
    httpClient
      .post(`api주소`, params)
      .then((response) => response),

하지만 파일 업로드는 좀 다르더라 ...

업로드해라: ({ formData }) =>
    httpClient
      .post(`api주소`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      })
      .then((response) => response),

엥 headers는 뭐고 Content-Type는 뭐고 multipart/form-data는 뭐여 ...

대충 알고보니 서버에서 받을 때 데이터 타입을 알도록(?) 하는 것 ... 모르는게 죄니까 통신 공부 하자 ㅠ

(사실 봐도 모르겠음)

 

이제 첨부기능 만들어보자 ... 솔직히 type="file" 처음 써봤다.. ㅠㅠ

<input type="file" >

만들면 이런 애가 나온다

그냥 기본은 아무거나 다 첨부가 가능함.

엑셀만 보이도록 설정해보자 ...

<input type="file" accpet=".xls, .xlsx">

여기서 accept=".xls, .xlsx" 속성을 추가하면 엑셀 파일만 보인다.

 

이렇게! 참고로 어짜피 전체파일 눌러서 다른 확장자 첨부할 수 있긴 한데, 아예 첨부를 막는건 스크립트에서 해야한다.

그리고 생성한 input 태그는 안쓰고 스타일로 숨기게하는데, 나는 그냥 촌쓰러워서 숨기는 줄 알았는데 알고보니 type="file"은 css 주기도 어렵고 보안 문제가 있다고 한다.

 

<button @click="인풋클릭()">
  A 버튼
</button>

 

 input 태그를 스타일로 숨기고 대체할 A 버튼을 만듬.

 

그리고 그 A 버튼의 클릭 이벤트에 input 태그를 클릭하도록 설정.
즉, 원래는 input 태그 클릭 → 파일선택 이라면 ...
A 버튼 클릭 → input 태그 클릭 → 파일선택 이 되도록 만들어야 함

 

<input type="file" accpet=".xls, .xlsx" @change="업로드해라">

input 태그에는 change 이벤트 등록! 첨부가 되면 뭐라도 하라고 등록하는 것이다.

 

근데 change 이벤트이다보니까... 같은 파일을 두 번 연속 업로드하면 수행을 안한다.

그러니까 ... aaa.txt 첨부 → change 동작 → aaa.txt 첨부 → 같은 파일이네? change 동작 안함

그래서 input 태그 value를 리셋하는 작업이 필요

 

A버튼 () {
  인풋태그.value = '';
  인풋태그.click();
}

A 버튼의 클릭 이벤트에 input 태그의 value 를 비우고 input 태그를 클릭하도록 하였다.
이 후 정상적으로 change 되면 업로드하는 메소드 등록(api) 하면 끝!

그리하여 ...

A 버튼 클릭 → input 태그 값 없앰 → input 태그 클릭 → aaa.txt 첨부 → change 동작 → A 버튼 클릭 → input 태그 값 없앰 → input 태그 클릭 → aaa.txt 첨부 → change 동작 → ...

이렇게 같은 파일 계속 보낼 수 있게 되었다..
같은 파일 두번 연속 못보내는거 대부분 실수니까 알아서 막는거 개꿀 아닌가 싶었는데, 같은 파일 보냈다고 에러 알림이라도 뜨든가 뭔 조치를 취해야하니 이렇게 리셋작업을 해줘야한다..

 

이거 말고도 메소드 마다 async 등록하는 것도 있고 넘 생략을 많이 했는데 일단 생략 ^,^

 

끝