node.js - express 이미지 업로드

m.blog.naver.com/sssang97/221642022702

[Express.js] Multer 모듈과 파일 업로드

donghunee.github.io/study/2019/07/25/nodeimg/

[Node.js]이미지 업로드 및 저장

npm install --save multer

을 사용해 multer 모듈을 설치해준다.

 

 

4) 이미지 업로드를 위해 multer 모듈 선언

5) multer모듈이 담긴 multer 변수의 .diskStorage함수로 디렉터리와 파일명에 대한 객체를 생성해서, 업로드 객체를 생성할때 storage 멤버로 전달

6) 이미지가 업로드 되어 저장될 디렉토리를 설정한다.

7) "images/" 라는 디렉토리에 저장된다.

9) 파일의 이름을 설정한다.

10) file.originalname   <-  업로드한 file 정보중 originalname 안에 담겨있는 진짜 파일의 이름을 가지고 파일 이름을 저장한다.

13) upload 변수에 저장경로를 설정한다.

 

16) 페이지에서 업로드 버튼을 클릭하면 /upload 페이지로 넘어가 업로드 작업을 수행한다.

   두번째 인자인 upload.single('img') 는 페이지 업로드 링크 중 input 태그의 

name과 이름을 같게 해야한다.

17) request(요청) 중 file항목의 내용(방금 업로드한 파일의 정보)를 콘솔에 출력한다.

18) 업로드 작업이 완료되면 홈으로 리다이렉션한다.

22) 업로드에 관련된 파일선택 버튼과 업로드 버튼이 생성될 페이지이다. 여기서는 홈에 바로 만들었다.

34) enctype="multipart/form-data" 를 설정해야 사용자가 전송한 파일을 서버로 전송할 수 있다.

    action="/upload"     <- 업로드(submit) 버튼을 클릭하면 /upload 페이지로 넘어가 업로드 작업을 수행할 수 있다.

35) type을 file로 해야 파일선택 버튼이 생긴다.

36) 업로드 버튼