이미지 통신 오류...

안녕하세요. 서버와 이미지를 주고 받는 과정에서 에러가 발생했는데 어떤 부분이 문제일까요... 급하게 마무리 하려다 보니 자꾸 잘 안되네요ㅠㅠ

클라이언트의 ImageUpload.js 코드

import axios from 'axios'
import React from 'react'

function ImageUpload() {
    const FileUpload = (e)=>{
        var formData = new FormData() //서버로 보내기 위한 파일내용 인코딩
        formData.append("file", e.target.files[0]) //file이름으로 첨부된 파일 데이터를 추가
        axios.post('/api/post/image/upload', formData)
        .then(()=>{
            console.log("성공")
        }).catch((err)=>{
            console.log(err)
        })

    }

  return (
    <div>
        <input onChange={(e)=>FileUpload(e)} type="file" accept='image/*'/>
    </div>
  )
}

export default ImageUpload

클라이언트 창 콘솔 에러...

서버의 post.js 코드

const express = require('express')
const router = express.Router()
const multer = require('multer')

const { Post } = require('../models/post.js')
const { Counter } = require('../models/counter.js')

router.post('/submit', (req, res) => {
    let temp = req.body
    Counter.findOne({ name: 'counter' }).exec().then(counter => {
        temp.postNum = counter.postNum
        const CommunityPost = new Post(temp)
        CommunityPost.save().then(() => {
            Counter.updateOne({ name: "counter" }, { $inc: { postNum: 1 } })
                .then(() => {
                    res.status(200).json({ success: true })
                })
        })
    }).catch(err => {
        err.status(400).json({ success: false })
    })
})

router.post('/list', (req, res) => {
    Post.find().exec().then(doc => {
        res.status(200).json({ success: true, postList: doc })
    }).catch(err => {
        status(400).json({ success: false })
    })
})

router.post('/detail', (req, res) => {
    Post.findOne({ postNum: Number(req.body.postNum) }).exec()
        .then(doc => {
            res.status(200).json({ success: true, postList: doc })
        }).catch(err => {
            console.log(err)
            status(400).json({ success: false })
        })
})

router.post('/edit', (req, res) => {
    console.log(req.body)
    let temp = {
        title: req.body.title,
        content: req.body.content,
    }
    console.log(temp)
    Post.updateOne({ postNum: Number(req.body.postNum) }, { $set: temp }).exec()
        .then(() => {
            console.log("수정성공")
            res.status(200).json({ success: true })
        }).catch(err => {
            console.log("수정실패")
            err.status(400).json({ success: false })
        })
})

router.post('/delete', (req, res) => {
    Post.deleteOne({ postNum: Number(req.body.postNum) }).exec()
        .then(doc => {
            res.status(200).json({ success: true })
        }).catch(err => {
            console.log(err)
            status(400).json({ success: false })
        })
})

const storage = multer.diskStorage({ //multer를 통해 전달받은 데이터를 파일 디스크에 저장
    destination: (req, file, cb) => {  //저장할 경로를 지정
        cb(null, 'image/')
    },
    filename: (req, file, cb) => { //저장할 파일의 이름 지정
        cb(null, file.originalname + '-' + Date.now())
    }
})

const upload = multer({ storage }).single('file')

router.post('/image/upload', (req, res) => {
    upload((req, res, err) => {
        if (err) res.status(400).json({ success: false })
        else console.log("성공!")
    })
})

module.exports = router

이전 기능까지는 잘 구현되었는데 이미지 통신 자체가 잘 안되는 것 같습니다...

서버 쪽에서는

TypeError: Cannot read properties of undefined (reading 'transfer-encoding')

at hasbody (C:\Users\wis06\Desktop\community-app\server\node_modules\type-is\index.js:93:21)

at typeofrequest (C:\Users\wis06\Desktop\community-app\server\node_modules\type-is\index.js:127:8)

at multerMiddleware (C:\Users\wis06\Desktop\community-app\server\node_modules\multer\lib\make-middleware.js:18:10)

at C:\Users\wis06\Desktop\community-app\server\Router\post.js:81:5

at Layer.handle [as handle_request] (C:\Users\wis06\Desktop\community-app\server\node_modules\express\lib\router\layer.js:95:5)

at next (C:\Users\wis06\Desktop\community-app\server\node_modules\express\lib\router\route.js:144:13)

at Route.dispatch (C:\Users\wis06\Desktop\community-app\server\node_modules\express\lib\router\route.js:114:3)

at Layer.handle [as handle_request] (C:\Users\wis06\Desktop\community-app\server\node_modules\express\lib\router\layer.js:95:5)

at C:\Users\wis06\Desktop\community-app\server\node_modules\express\lib\router\index.js:284:15

at Function.process_params (C:\Users\wis06\Desktop\community-app\server\node_modules\express\lib\router\index.js:346:12)

라고 뜹니다!

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