avatar , video upload (multer, static)

처음 아이디를 생성 할 때 사진파일을 넣을 공간을 안주었다.

프로필을 Edit할 때 선택적으로 집어 넣을 수 있도록 말이다.

Userschema에서 avataUrl을 추가하고

edit-profile.pug

우리가 파일을 업로드하기 위해서는 multer라는 미들웨어가 필요하다. 설치를 먼저 해주자

npm i multer

multer를 쓰려면 form을 multipart/for-data으로 만들어주어야한다.
enctype="multipart/form-data" 이게 파일을 업로드하기 위한 유일한 조건이다.

 

middleware.js

avatarUpload와 videoUpload를 만들어준다. dest를 설정하여 서버 어디에 저장할 지 지정해주고 limits를 활용하여 파일의 크기를 제한할 수 있다. 

milddlware는 왼쪽에서 오른쪽 순서로 이동하고
avatarUpload가 먼저 실행되고 그 다음 postEdit이 실행된다.

이 미들웨어가 하는 역할은 template의 input에서 오는 avater파일을 가지고 파일

을 업로드하고
uploads폴더에 저장한다.

그런 다음 controller인 postEdit에 그 파일의 정보를 전달한다. 그 정보는 request에 req.file여기에 추가된다. 

req.file.path에 multer가 업로드 한 주소가 저장되어있다. 만약 파일을 안올리면 req.file = undefinded이기때문에 

edit을할 때 avatarUrl : req.file.path만 적게되면 파일이 없을 경우 기존에 있던 파일경로도 지워진다. 따라서 삼항연산자를 사용하여 file이 객체가 없다면 기존 avatarUrl을 유지해주는 코드를 작성해야 한다.

이렇게 upload속에 잘 저장이 되어있는 것을 확인할 수 있다. 

 

이와 똑같은 방법으로 video upload또한 조금 수정해주겠다.

 

upload.pug

form도 edit과 마찬가지로 encode type 을 바꿔주고 video를 업로드할 수 있는 input을 만들어준다. required옵션을 주어 무조건 올리도록 설정하였다. 그리고 accpet="video/*"를 적어주면 영상만 올릴 수 있다. "image/*는 이미지만올릴 수 있다. 

router에 multer middleware를 적어준다. single은 파일을 하나만 올릴 때 사용한다. 여러개를 올릴려면 다른 걸 사용해야한다. 그리고 'video'는 pug에서 file input의 name이다. 

이렇게 해주면 user edit과 video upload도 성공적으로 된다.

절대 DB에 파일을 저장하지말고 DB에는 파일의 위치만 저장한다 

하지만 !!!! 이대로 끝내면

우리가 video와 img로 upload에 있는 파일을 불러오려고 할 때 안불러와질 것이다.

 

브라우저가 /upload/avatar/~~~~ 이렇게 서버에 요청을 할텐데

우리가 /uploads url만든적이있나? 없다.
express한테 uploads폴더가 새로 생겼다고 말해준 적, 누군가가 uploads에 간다고 말해준 적이 없다.

따라서 !!!!

브라우저가 서버에 있는 파일에 접근할 수 없으니까 uploads 폴더에 있는 내용을 볼 수 있게 해줘야 하는 상황이다.

그래서 static files serving이라는걸 활성화 한다. 폴더전체를 브라우저에 노출 시킨다는 의미이다.

설명을 읽어보면 디렉토리 내부의 파일을 제공한다고 써있다. 

이를 통해 /upload url로 접근한다면 upload에 있는 파일을 사용할 수 있도록 알려주는 것이다.!!

 

곰곰히 생각해봤을 때 static없이 브라우저가 서버의 어떤 폴더로든 갈 수 있다면 보안상 안좋을 것이다....