multer관련 path오류

Question

현재 multer부분 실습중인데요ㅠ 어째서인지 이미지도 다 멀쩡히 저장되고 모든것이 다 잘 저장이 되는데 문제가 filepath가 file : "1641991261555_239.jpg" filePath : "server\uploads\1641991261555_239.jpg" success : true 로 저장이 되서 src부분이 경로가 제대로 안되는것 같더라구요ㅠ multer문제인 것 같은데 혹시 뭐가 문제인지 알수 있을까요...? 참고로 router에 넣지않고 index.js에 작업하고 있습니다 server쪽 코드 const storage = multer . diskStorage ({ destination : function ( req , file , cb ) { cb ( null , 'server/uploads' ) }, filename : function ( req , file , cb ) { cb ( null , ` ${ Date . now () } _ ${ file . originalname } ` ) } }) const upload = multer ({ storage : storage }). single ( "file" ) app . post ( '/api/product/image' , ( req , res ) => { //가져온 이미지를 저장을 해주면 된다. upload ( req , res , err => { if ( err ) { return res . json ({ success : false , err }) } return res . json ({ success : true , filePath : req . file . path , file : req . file . filename }) }) }) react 컴포넌트 부분 코드 function FileUpload () { const [ Images , setImages ] = useState ([]); const dropHandler = ( files ) => { let formData = new FormData (); const config = { header : { 'content-type' : 'multipart/fomr-data' } } formData . append ( "file" , files [ 0 ]) axios . post ( '/api/product/image' , formData , config ) . then ( response => { if ( response . data . success ){ console . log ( response . data ) setImages ([... Images , response . filePath ]) } else { alert ( '파일을 저장하는데 실패했습니다' ) } }) console . log ( Images ) }

John Ahn · Answer

해결 본도 공유해주셔서 감사합니다!!!

uo f · Answer

좀 어거지 같지만 해결했습니다. 뭐가 문제인지는 모르겠는데 저는 아무리 해도 path값이 이상하게 가져와지더라구요....그래서 혹시나 저와 같은 오류가 있으신 분이 있으시면 참고하시라고 해결한 코드를 올려놓습니다 client쪽 코드 const dropHandler = ( files ) => { let formData = new FormData (); const config = { header : { 'content-type' : 'multipart/fomr-data' } } formData . append ( "file" , files [ 0 ]) axios . post ( '/api/product/image' , formData , config ) . then ( response => { if ( response . data . success ){ setImages ([... Images , ` ${ response . data . filePath } / ${ response . data . file } ` ]) props . refreshFunction ([... Images , ` ${ response . data . filePath } / ${ response . data . file } ` ]) } else { alert ( '파일을 저장하는데 실패했습니다' ) } }) } sever쪽 코드 app . post ( '/api/product/image' , ( req , res ) => { const storage = multer . diskStorage ({ destination : function ( req , file , cb ) { cb ( null , 'uploads' ) }, filename : function ( req , file , cb ) { cb ( null , ` ${ Date . now () } _ ${ file . originalname } ` ) } }) const upload = multer ({ storage : storage }). single ( "file" ) //가져온 이미지를 저장을 해주면 된다. upload ( req , res , err => { if ( err ) { return res . json ({ success : false , err }) } return res . json ({ success : true , filePath : res . req . file . destination , file : res . req . file . filename }) }) })