[error] Uncaught TypeError: Illegal invocation

✋ 에러코드

Uncaught TypeError: Illegal invocation

🤦‍♂️ 상황

multer을 사용해서 단일 데이터를 서버에 올리는 상황

html코드

      <tr>
        <td>포토</td>
        <td><input type="file" id="photo" name="photo" /></td>
      </tr>

제이쿼리

제이쿼리를 이용해서, 입력되는 파일이 변경될 때마다, 서버에 파일을 저장한다.

보내는 데이터는 FormData를 이용해서 전송한다.

const data = new FormData();
// input의 이름이 photo인 파일데이터 중에 첫번째 것
data.append('photo', $('input[name=photo]')[0].files[0]);

append 메서드로 데이터를 키-값으로 저장

$.ajax으로 전송하는데 Uncaught TypeError: Illegal invocation가 발생..

👍 해결

$.ajax으로 데이터를 전송할 때, 추가적인 설정을 넣어준다.

contentType: false, processData: false 옵션을 추가해준다. 

        // 만든 data를 서버로 전송
        $.ajax({
          url: 'http://localhost:3000/api/members/upload',
          type: 'POST',
          data: data,
          // JSON을 배열로 전달하려해서 나는 오류를
          // 보내려해서나는 에러
          contentType: false,
          processData: false,
          success: function (res) {
            console.log('업로드된 파일 경로정보', res);
          },
        });

보내는 데이터 타입때문에 나는 에러