17. 파일업로드

1. 파일 업로드 준비

사용자가 선택한 파일을 업로드하여 저장하는 것을 만들어 볼 것. express에서는 따로 제공하지 않아서, 모듈을 사용해야한다.

그것은 바로 multer, 사용법은 링크로 들어가보면 나와있다. 우선 설치는 npm 모듈을 이용해야 한다.

2. 파일 업로드 양식(form)

• /upload 라우터로 접속 할 때, 업로드창이 뜨도록 설정하기.  

1. 기본 틀 작성 후, 라우터 설정.

유저가 /upload로 접속했을 때 와 파일을 전송후 접속되는 get과 post 라우터를 위와 같이 설정해준다. 템플릿 엔진을 이용하기위해 다른코드도 입력했다.

2. 템플릿 엔진 작성

views_file 폴더에서 템플릿 파일을 사용할것이므로, views_file 폴더에 upload.pug를 만들어서, 위와같이 입력해보자. multer를 사용하기 위해서는 form 태그안에 enctype='multipart/form-data'를 꼭 입력해주어야한다.

서버를 키고, http://localhost:3000/upload로 접속해보면, 위와같이 화면이 렌더 되고, 제출버튼을 누르면 라우터가 정상적으로 작동하는 것을 볼 수 있다.

3. multer 소개

multer 공식문서를 보면, 사용법이 나와있다.

공식문서를 보면 var upload = multer({ dest: 'uploads/' }) 코드는 파일을 업로드할 폴더를 지정해주는 것이다.

사용예제에서 post라우터를 보면, upload.single('avatar')라는 코드가 있다. 파일네임을 저장받는 것이다.  

multer 예제에 맞춰서, post 라우터 변경해보자. singel의 filedname은 템플릿에서 작성한 input name 명을 써줘야한다.

/uproad에 접속하여, 파일을 올리고 제출을 하면, post 화면으로 넘어간다. 정말 req.file에 객체로 저장되는것을 확인 할 수 있다.

콘솔창을 보면, 정확한 req.file에 대한 정보가 나오고, uploads폴더에 우리가 전송한 파일이 추가가된다.

4. multer 심화

multer의 옵션객체에서 dest가 아닌 storage를 사용 할 수 있다. 이것을 활용해보자.

공식문서를 보면, 사용법이 나와있다. destination에는 파일이 어디에 저장될 지 cb에서 지정해주면 된다. filename은 파일이 저장될 폴더에 파일명을 정해주는 것이다.

filename의 file객체는 여러가지 key를 가지고 있다. 우리는 원본의 이름을 저장하도록 코드를 짜보자.

지난번 코드에 저런식으로 수정을 해주면, 완성된다.

서버를 키고, 파일을 제출하면, 정상적으로 파일명으로 파일이 업로드 되는것을 확인 할 수 있다.

/user로 라우터를 설정후 http://localhost:3000/user/파일명 으로 접속을하면 저장된 정적파일을 볼 수 있다.

출처 - 생활코딩, multer공식문서, express공식문서