[Node.js] 파일(이미지) 업로드, 다운로드, 수정, 삭제

 

 

 

 

파일 업로드, 다운로드

파일 세팅

 

npm install express --save npm install ejs --save npm install supervisor --save npm install body-parser --save npm install multer@1.4.4 --save

npm 설치

 

세팅 완료

 

npm start 로 서버 구동되게끔 설정도 완료

 

기본 서버 구동 코드 작성

 

파일 업로드, 다운로드는 post 방식을 사용하기 때문에 body-parser 사용 router 위임

 

router.js 에서 app 을 위임받아 사용 후 바로 router 를 export

 

router 에서 /file 경로로 들어오는 부분은 fileRouter 를 변수로 생성하여 위임 후 file_router.js 에서는 /file 경로로 들어올때 내용을 처리하고 router 를 다시 export 로 반환 

 

file_router 에서는 세부 경로를 다시 file_controller 로 위임

 

file_controller 에서 Object 를 하나 변수로 선언하여 키와 값으로 경로들을 묶어서 export 하고 file_router.js 에서는 사용 하고자 하는 키로 값을 가져와 사용한다

 

controller 작성, file_index.ejs 작성 후 작동 결과

 

form 태그 내에서 파일을 전송하는 경우

enctype="multipart/form-data"

위 코드를 적용해줘야 함

 

file_router 에 파일 선택 후 업로드할때 출력될 페이지 경로 설정 ( 파일 전송이기 때문에 post 방식 )

 

단순히 화면을 출력하는 부분은 view 라는 Object 에 모아서 사용, process 라는 Object 에는 연산을 하는 부분을 넣어서 사용, file_router 에서도 코드 수정

 

controller 에서 기존처럼 사용하지 않는 이유는 결국 controller 에 세부 경로가 많아질 수록 코드가 쌓이게 되는데 코드에서 문제가 생길 시 단순 출력 부분과 연산 부분 중 어느 부분이 문제가 생긴지 파악하고 쉽게 고칠 수 있기 때문... 또한 Object 로 묶어서 사용하는 이유는 exports 의 코드가 너무 길어지기 때문이므로 Object 를 exports 하여 router 에서 Object.key 형식으로 함수를 사용한다

 

router 에 multer 설정 및 파일 업로드 부분에 multer 의 기능을 추가.... controller 에서 console 로 출력 코드 적고 파일 전송해봄

 

저장되는 파일의 이름을 원본 파일과 동일하게 저장하기 위해 코드를 수정

 

코드 실행

 

 

 

 

 

특정 파일 형식만 사용하고 싶은 경우

filter 를 따로 구성하여 multer 에 추가한다

 

사용할 수 없는 확장자를 올리는 경우 filter 에서 확장자가 일치하지 않는 경우 req.fileValidation 에 문구를 설정하고 req.fileValidation 은 controller 에서도 사용할 수 있기 때문에 컨트롤러에서 확인하여 분류한다

 

코드 동작 영상

 

 

 

 

 

 

 

 

 

 

다운로드 구현

router 와 controller 에 이미지가 저장된 디렉토리의 내용을 읽어오는 코드를 작성

 

읽어온 이미지를 /file/list 경로로 보내줘서 출력 후 a 태그를 걸어 다운로드 링크를 생성

 

라우터에 다운로드 경로 추가, 컨트롤러에 다운로드 기능 추가

res.download(경로) : 해당 경로를 다운로드

 

다운로드 기능 구현 완료

 

 

 

 

 

 

 

 

 

 

이미지 업로드 시 미리보기 기능 구현

이미지 미리보기 구현은 파일 올리는 부분의 ejs 에서만 처리해주면 된다

onchange="readURL(this)" : 만약 파일이 선택되면 태그에 변경이 일어나기 때문에 readURL() 함수를 실행시킨다, 이때 매개변수로 자기 자신 태그가 가지고 있는 파일 정보를 전송한다.

 

readURL 함수에서는 이 파일의 정보를 input 변수로 넘겨 받아서 해당 변수의 files 라는 키 안에 들어있는 파일의 저장 경로를 file 함수로 담아준다

> 만약 파일 경로가 비어있지 않다면 ( 파일이 정상적으로 올라왔다면 ) 이 파일의 정보를 FileReader 를 사용하여 읽어서 변수 e 로 만든다.

> 이후에 이 변수의 target 이라는 키 안에 result 키에 담겨있는 이미지에 대한 경로를 가져와서 html 코드의 img 경로를 변경해준다

 

 

 

 

나중에 쇼핑몰같은 홈페이지의 경우 썸네일을 모두 원본으로 사용해버리면 용량이 너무 커지기 때문에 썸네일용으로 따로 파일을 처리해서 사용해야 한다 ( 구선생님께 노드 썸네일 생성 으로 검색하면 나옴 )

 

 

 

 

 

 

 

 

 

 

파일 삭제 구현

ejs 작성, router 작성

 

controller 에 삭제 기능 구현

 

 

 

 

 

 

 

 

 

 

파일 수정

원본 파일을 삭제 후 저장

수정기능 경로로 가는 ejs 파일 작성, router 에 경로와 파일이름 같이 전송

 

controller 에 views 에 modify_form 경로로 가는 부분 작성

 

modify_form.ejs 작성

 

modify_form.ejs 에 hidden 으로 코드 추가

 

수정 부분 router 에 추가 ( 파일을 전송하기 때문에 post 방식 )

 

파일을 수정하면 원본으로 있던 파일을 삭제하는 코드를 controller 에 작성, 그리고 수정을 누르는 순간 router 에서 수정될 이미지는 upload 명령어를 사용해서 저장하기 때문에 따로 새로 수정될 이미지를 저장하는 코드는 작성하지 않음

 

 

 

 

 

 

 

 

 

 

자바스크립트 파일과 css 파일을 하나의 파일로 분리하여 관리

중복된 스크립트 코드를 image_read.js 라는 파일에 옮겨놓음

 

스크립트가 들어있는 경로를 /static 으로 설정 후 file_index.ejs 파일과 modify_form.ejs 파일에 설정

 

공용으로 사용할 css 파일 작성 후 file_list.ejs 에 적용해봄