Firebase Functions + Express + Multer 사용시 이미지 업로드 관련 이슈

서론

Redux Saga -> Firebase Cloud Functions -> Express -> Multer의 과정을 거쳐서 이미지 파일을 FormData에 담아서 업로드 하던 도중 request.body가 비어 있는 이슈가 발견 되었다.

 

단서

I have been suffering from the same problem for a few days, turns out that firebase team has put the raw body of multipart/form-data into req.body with their middleware. If you try console.log(req.body.toString()) BEFORE processing your request with multer, you will see your data. As multer creates a new req.body object which is overriding the resulting req, the data is gone and all we can get is an empty req.body. Hopefully the firebase team could correct this soon.

 

해석해보자면, 기본적으로 FormData에 담아서 서버로 전송하면 Content-type이 multipart/form-data로 설정된다. 이 http 요청이 파이어베이스 functions의 미들웨어를 통해 처리되는데 request body에 들어있는 boundary로 구분된 binary raw data가 파싱된다. 그래서 multer로 처리하기 전에 request body를 콘솔에 찍어보면 정상적으로 출력 되는 것을 볼 수 있다.(cloud functions가 넣어줬기떄문에) 하지만, functions와 multer를 같이 사용하면 multer가 request body를 읽으려고 할때 파이어베이스의 미들웨어가 이미 한번 처리한 request body를 읽기 때문에 multer는 값을 제대로 읽지 못해서 최종적으로 request body가 비어 있게 된다. 

 

multer를 제거하고 콘솔에 request를 찍어보니까 body에 정상적으로 binary 데이터가 들어온다.

 

해결책1. multer를 이용해서 request body를 파싱하지 말고 직접 파싱하자..