multer multiple 적용

현재 진행중인 페이스북 클론코딩에서

게시물 작성을 할 때 이미지 파일을 single이 아닌 multilple로 업로드 할 수 있도록 코드를 수정했다.

먼저 라우터 아래와 같이 설정해 주었다.

router.post('/', authMiddleware, uploadImage.array('img', 4), postsController.createPost);

multer 미들웨어에 이미지 파일 업로드를 uploadImage라는 상수로 선언했다.

그리고 그 뒤에 single이 아닌 array로 입력해주었다. 괄호 안의 첫번째 인자는 클라이언트에서 이미지 파일을 넘겨줄 때 사용하는 키값이다. 그리고 뒤의 숫자는 업로드를 허용하는 이미지 파일의 개수이다.

 

위와 같이 설정해주면 서버쪽에서 req.files를 이용해 업로드된 파일의 정보를 확인할 수 있다.

하지만 현재 서버쪽에서는 aws s3에 저장된 이미지 파일의 url만 필요했다.

그래서 req.files에서 필요한 정보를 꺼내오는 번거로운 과정 없이

multer 미들웨어에 s3에 저장한 이미지 파일의 url을 배열 형태로 반환하는 코드를 추가해주었다.

      if (!req.img_url) {
        req.img_url = [];
        }
        req.img_url.push(img_url);

생성된 url을 'img_url' 상수에 저장하기 때문에 위와 같이 써주었다.

그러면 미들웨어를 통과해 aws s3에 저장된 이미지 파일의 url은 라우터 쪽에서 배열 형태로 받을 수 있다.

그렇게 해서 받은 배열을 반복문을 통해 db에 저장해주었다.