node.js 파일을 업로드하고 해당 파일을 서버에 저장하는 방법

최근 사이트에서 회원들의 프로필 사진을 업로드 하여 서버에 저장하는 기능을 구현하는 작업이 필요했다.

조금 부끄럽지만 이전에 업로드 기능을 사용해본적이 없기에 이번에 그 기능을 구현하느라 조금 고생을 하였다.

생각외로 방법은 간단하였다.

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

자세한 방법는 본 동영상에 잘 설명되어 있다.

물론 방법은 잘 설명되어 있지만 실제 해보게 되면 여러가지 난관에 부딫히게 된다.

첫번째 난관은 어떻게 업로드 파일의 데이터를 받아올 것인가에 대한 문제였다.

동영상에서는 form 형식 안에서 submit 이벤트가 발생할때 그에 따라 데이터를 보내주지만

나는 따로 만들어준 특정 버튼을 클릭했을때 데이터를 보내주게 만들었다.

문제는 전자는 알아서 데이터 형식을 만들어 보내줘야 하는 반면,

나같은 경우는 ajax를 통하여 데이터를 조작해준 후에 보내줘야 했다.

특히 업로드 파일의 형태의 데이터를 한번도 받아보고 보내본적이 없기에 어떠한 형식으로 보내야 할지 깜깜했었다.

그러한 와중에 아래와 같은 사이트를 찾게 되어 문제를 해결 할 수 있었다.

핵심은 FormData() 이다.

http://hellogk.tistory.com/28

그리고 전송하는 도중 아래와 같은 오류가 발생하였는데,

Uncaught TypeError: Illegal invocation error.

본 오류가 나는 원인은 ajax 설정에서 아래와 같은 설정을 추가하지 않았기 떄문이다.

contentType: false,

processData: false

contentType과 processData에 관한 속성이 무엇인지에 대한 설명은 아래의 사이트에 잘 나와있다.

http://hsj0511.tistory.com/205

그외에도 아래와 같은 하나의 에러가 더 발생하였다.

413 Request Entity Too Large

본 에러는 파일 전송시 용량의 한계를 정해놓지 않아서 발생하는 에러로 추측하고 있다.

이와같은 문제를 해결하기 위해서는 아래와같은 코드 한줄만 추가해주면 되었다.

app.use(bodyParser({limit: '20mb'}));

limit 옵션의 용량은 본인이 자율적으로 쓰면 될 것이다.

(http://blog.naver.com/PostView.nhn?blogId=creatorjason&logNo=220061546977&redirect=Dlog&widgetTypeCall=true 본 사이트를 참고했다.)

이렇게 세팅하고 처음의 동영상대로 작업을 하니 정상적으로 작동이 되었다.

참고>

input의 파일 속성에 대한 유용한 것을 알게 되었는데,

속성을 어떻게 정의하느냐에 따라 특정확장자의 파일만 받을수도 있고 카메라 등도 호출할 수 있으며, 다량의 파일을 동시에 받을 수 있다.

이외에도 여러가지 기능이 있었가 있다.

그것에 관하여는 아래의 사이트에 잘 정리되어 있다.

http://ankyu.entersoft.kr/Lecture/jquery/script_02_24.asp

또한 유저의 프로필 이미지 작업을 하시는 분들을 위해 하나 팁을 말해주자면,

만약 유저의 이미지가 없을때 임시 이미지를 보여주어야 하는데,

이미지 태그의 아래와 같은 속성을 이용하면 쉽게 구현할 수 있다.

onerror="javascript:src={url}"

자세한 설명은 아래의 블로그를 참조하면 된다.

http://changpd.blogspot.kr/2015/07/html.html