kasumil의 코딩 공작소

버그 체크를 하는데, 간혹 파일 선택을 했는데 다시 파일 선택창이 뜬다. 무엇이 원인인고? 하고 봤더니 라이브러리 자체버그.. 기본 공식문서에서 주는 방법이다. 이렇게 쓰지말고, 그냥 버그 없는 것 같은 라이브러리 버전 찾아서 해당 버전으로 고정해서 쓰자. 이래야 버그가 없더라.

$('#upload').on('change', function() { console.log('upload'); }); 방법은 간단하다. 변화를 감지하게 하여 해당 파일이 업로드시에 해당 console.log가 찍히는 부분에 원하는 코드 예를 들어 ajax나 또는 axios, fetch를 넣어 서버에 통신하게 하면된다. 속도에 문제가 있다하면, 제이쿼리보다 바닐라코드가 빠르므로 제이쿼리를 쓰지 않는다면, 바닐라 코드를 쓰길 권장한다. document.getElementById('upload'); 이렇게 접근하면 된다.

흔히들 보는 이미지 업로드 방식은 바로 input을 이용한 방식일 것이다. 대충 만들었다. 다들 이렇게 해서 파일을 보내리라고 본다. 내가 기존에 작성한 toast ui 업로드 방식에서 이미지서버가 아닌 move file을 이용한 업로드를 구현해야했다. 그러다보니 기존 blob을 사용해야하는데 input에서는 작동하지 않는다.... 이를 위해서 blob으로 바꿔줘야 했다. let file = $('#file').prop("files")[0]; // input file에서 데이터 뽑는 방법 let tmp = new Blob([file], { type: `${file.type}` }); // 타입은 동적으로 보내서 감지할 수 있게 했음. let formData = new FormData(); formData..