[Node.js Express] client가 보낸 사진 Sever에 받아오고 저장하기 -2 (MulterError : Unexpected field)

일반적으로 클라이언트에서 문자열 데이터와 이미지를 함께 보내는 방법으로 멀티파트(form-data)요청을 사용한다고 한다.

insomnia에도 multipart 요청이 있었다.

 

server로 multipart 요청을 보내면, 서버에서는 요청을 처리해야한다.

 

Express에는 Multer라는 모듈이 있다고 한다.

npm install multer

multer설치

 

chatgpt가 알려준 것을 참고하여 코드를 작성하고, test 요청을 보내보니, file이 저장되기는 하는데 확장자 없이 저장이되었다.

파일 이름도 지정할수 없게 저장이 되었다.

일단 그래도 file의 저장경로와 이름등의 정보는 request.files 부분에 담겨서 전달되는것을 확인하였다. (아마 multer 모듈을 써서인듯)

여기에 담겨오는 url을 db에 저장하여 관리하면 된다.

 

사진은 없지만 string 데이터들은 request.body부분에 담겨 왔다.

 

사진을 관리하기 쉽게 저장하기위해 chat gpt와 공식문서의 도움을 받았다.

https://expressjs.com/en/resources/middleware/multer.html

Express multer middleware

app.use(upload.any()) 대신,  특정 라우트 부분에만 따로 미들웨어를 지정(용어가 맞나?) 해준것을 확인하였으며, multer.diskStorage()를 통하여, 파일의 저장 경로, 사진의 이름을 지정할 수 있었다.

 

multer({dest: "" }) 는 경로만 설정하는 것 같았으며, multer({storage:""})는 경로, 파일의 이름까지 설정 가능하게 구현해 놓은 것  같았다.

 

공식문서

파일을 handling하는 부분은 위와같이 지정할 수 있으며, 나는 사진파일 여러개를 controll할꺼기 때문에 .array를 사용하였다.

 

코드를 작성하고 실행을 하니, MulterError : Unexpected field   에러가 뜨고말았다.

 

에러 내용도 구체적이지 않아서 상당히 곤란했다.

 

한시간 정도 고생한결과, 

요청을 보낼때 file의 name (사진에서는 "123")과, 코드에서 upload.single('image')부분의 field명이 (사진에서는 'image')부분이 일치하지 않아서 생기는 에러였다.

=> 요청을 보낼때, client 와 server 간 field name을 어떻게 할건지 협의하는것도 중요하다는것을 다시한번 깨달았다. (물론 json string의 경우는 중요성을 알고있었지만 file까지 이럴줄 생각못했다.)

 

두개를 일치시키니 정상적으로 잘 작동하였으며, 파일명과 경로도 내가 원하는대로 잘 저장되었다.

 

요청을 보낼때, Name을 다르게 하여 파일별로 다르게 처리하고 싶으면 .field를 사용하여 일일히 보내는 필드명을 지정해주어야하고,

파일을 일괄적으로 처리하고 싶으면 .any .array등을 사용하면 된다.

 

처음엔 필드명이 중복되면 안된다는 생각에 다르게 지정하였었는데, array에 object로 담겨와서 중복되어도 상관이 없었다.

 

위의 코드 또한 request.files에 파일정보가 담겨왔으며, 담겨온 정보를 활용해 db에 저장하였다. 물론 body에 담겨온 string데이터 또한 저장해 주었다.

 

사진과, db에 사진 url까지 정상적으로 담기는 것을 확인하고 fs모듈을 활용해 client에게 사진을 보낼수 있게 만들었다.