multer를 이용해 클라이언트 request를 받는 것과 express의 router로 request를 받는 것 질문이요!

Question

안녕하세요! 강의 잘 듣고 있습니다. 저번의 질문 해결해주신 것 감사합니다! 진행 도중 또 질문이 생겨 올립니다 ㅠㅠ 파일 저장을 위한 storage 설정을 한 후에 그 설정 정보를 변수에  다음과 같이 담고서,  / STORAGE MULTER CONFIG let   storage  =  multer . diskStorage ({      // 클라이언트로 전달 받은 파일을 서버의 어느 곳에 저장할지 설정하는 부분이다.      // node server 폴더 구조에 맞춰서 uploads라는 폴더를 생성해 주자!      destination :  ( req ,  file ,  cb )  =>  {          cb ( null ,  "uploads/" );     },      // 저장되는 파일 이름을 지정하는 부분이다.      filename :  ( req ,  file ,  cb )  =>  {          cb ( null ,  ` ${ Date . now () } _ ${ file . originalname } ` );     } }); // 파일 저장 방식에 대해 설정한 정보를 upload란 변수에 담는다. 파일은 하나만 핸들링한다. const   upload  =  multer ({      storage :   storage }). single ( "file" ); 그 후에 upload 변수를 이용해 router 처리 시에 클라이언트로부터 온 파일을 핸들링 하는데요, 다음의 차이가 있습니다. router . post ( '/uploadfiles' , ( req ,  res )  =>  {      // 찍히지 않는다      console . log ( "req.file : " ,  req . file );      // 클라이언트에서 받은 비디오 파일을 노드 서버에 저장한다.      // 이를 위해 multer라는 dependency를 다운받는다.      upload ( req ,  res , ( err )  =>  {          // 파일 필터링          let   typeArray  =  req . file . filename . split ( '.' );          let   fileType  =  typeArray [ 1 ];          // 확장자가 동영상이 아니라면          if ( fileType  !==  'mp4'  &&  fileType  !==  'avi' ) {              return   res . json ({ success :   false ,  err });         }          // 잘 찍힌다.          console . log ( "req.file : " ,  req . file );          if ( err ) {              return   res . json ({ success :   false ,  err });         }           return   res . json ({              success :   true ,               url :   req . file . path ,               fileName :   req . file . filename         });     }) }); upload 내에서만 req.file이 찍히는데요, 클라이언트 요청에서의 코드는 formData에 'file'이란 key로 다음과 같이 보내줍니다. const   onDrop  = ( files )  =>  {          let   formData  =  new   FormData ;          formData . append ( 'file' ,  files [ 0 ]);                   const   config  = {              header :  { 'content-type' :   'multipart/form-data' }         };          axios . post ( '/api/video/uploadfiles' ,  formData ,  config )         . then ( response   =>  {              if ( response . data . success ) {                  console . log ( response . data );             }  else  {                  alert ( '비디오 업로드를 실패했습니다.' );             }         })         . catch ( error   =>  {              console . log ( error )         });    }; 도대체 왜 이런 현상이 발생하며, 무슨 차이가 있는 것일까요...?

John Ahn · Answer

우선  andrewlee  님  대신 답변해주셔서 감사합니다 ^^  그리고 이 질문에 대한 답변은    프로그래밍은 언어라고 생각해야 하는 부분에서 답을 얻을수 있을것 같아요. 언어는 가끔보면 논리적으로 이해해야 하기 보다 사람들의 약속으로 만들어진 부분도 있잔아요 ? 이 부분도 어찌 그러한 관점에서 보셔야 이해하기가 편합니다. post method로 body로 보내준 정보들은 req.body 로 가져올수 있죠  그리고 get method로 query param으로 보내준 정보들은 req.query로 또한 가져올수 있죠. 하지만 이부분에서는 formData로 보내주었잔아요 ? 그건 위에 것들 처럼 약속과 같이 multer를 통해서 정보를 잡아 올수가 있게 되어 있답니다 ^^

andrewlee · Answer

일단 제가 보기엔           return   res . json ({              success :   true ,               url :   req . file . path ,               fileName :   req . file . filename         }); 위 코드를           return  (              res . json ({ success : true  ,    url  :   res . req . file . path  ,   fileName  :   res . req . file . filename             }) 이렇게 고치셔야 할 것 같아요.

andrewlee · Answer

git을 통해 코드를 올리셔야 정확하고 빠르게 답변을 할 수가 있으실 것 같습니다.