본문 바로가기
Javascript

node.js를 이용한 이미지 파일 업로드 방법 (프론트엔드 중심으로)

by progrpsk 2018. 5. 25.

node.js를 이용하여 이미지 파일을 업로드 하려면 multer라는 라이브러리를 사용하면 된다.

아래는 그에 관한 방법에 대한 링크이다.


https://wayhome25.github.io/nodejs/2017/02/21/nodejs-15-file-upload/


이에 대한 동영상 강좌도 아래의 링크에 있으니 참고하기 바란다.


https://www.youtube.com/watch?v=2jwNNFbs4ic


여튼 여기까지 서버세팅이 끝났다면 프론트엔드 단에서 다음과 같은 문제를 생각하게 된다.

예제를 보아하니 다들 form 태그에 액션을 걸어서 이미지 파일을 전송해줬는데,

만약 form 태그를 안 쓰고 이미지 파일을 전송해야 된다면 어떻게 해야 하는가?


솔직히 나는 위의 질문에 답을 찾고자 웹서핑을 2시간 동안 하였지만 제대로된 시원한 답을 설명하는 사람은 없었고,

혼자서 열심히 힌트들을 종합해서 답을 찾아내었다.


바로 var formData = new FormData()를 사용하는 것이다.

해당 함수를 사용하면 formData.append('속성이름', '값')으로 해서 form형식의 객체로 서버에 전달할 수 있다.

고로 이미지가 form 태그에 속해있어도,

해당 함수를 통해

formData.append('이미지 인풋 속성이름(multer에서 쓰임)', $('이미지 인풋 선택자')[0].files[0])

이렇게 하면 multer에서 이미지를 인식하여 저장하게 된다.


그리고 최종적으로 formData에 저장된 데이터를 ajax 통신으로 보낼때 참고해줘야 할 사항이 있다.


$.ajax({

  type: 'POST',

  url: '주소',

  data: formData,

  processData: false,

  contentType: false,

  success: function(data) {

  }

})


위의 코드와 같이 processData 와 contentType 속성을 false로 해줘야 한다.

이렇게 안 하면 형식에 오류가 난다고 서버까지 전달되지 않는다.

왜 그런지 자세한 사항은 앞으로 알아봐야 할거 같다.


추가로 이미지를 업로드할때 사용할 인터페이스 툴에 대해서 말해보고자 한다.

나는 아래의 라이브러리를 추천하는데, 해당 라이브러리가 자체적으로 좋아서가 아니라 js 코드를 뜯어보니 내 입맛에 맞게 개조하기 쉬워서였다.


http://opoloo.github.io/jquery_upload_preview/


현재는 개조해서 유용하게 쓰고 있다.


혹 이미지 업로드에 방황하는 개발자가 있다면, 이 글을 참고하여 문제를 해결하는데 도움이 되었으면 좋겠다.


댓글