multer관련 path오류

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

해결된 질문

작성

411

현재 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)
  }

웹앱 mongodb react nodejs redux

답변 2

John Ahn

지식공유자

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

uo f

질문자

좀 어거지 같지만 해결했습니다. 뭐가 문제인지는 모르겠는데 저는 아무리 해도 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})
  })
})

인프런 커뮤니티 질문&답변

multer관련 path오류