Multer 文件为 req.body 上传空对象，为 req.file 上传未定义的对象答案

【问题标题】：Multer file upload empty object for req.body and undefined for req.fileMulter 文件为 req.body 上传空对象，为 req.file 上传未定义的对象
【发布时间】：2020-07-19 10:28:50
【问题描述】：

我之前曾发布过关于使用 multer 上传文件的问题。我正在 mern 堆栈中尝试它。尽管我尝试了很多方法，但我仍然无法解决它。我的应用程序中同时使用了 body-parser 和 multer。在 index.js 我有以下代码顺序：

    const express=require('express')
    const app=express()
    const route=require('./router/route')
    const db=require('./models/db')
    const cors=require('cors')
    const bodyParser=require('body-parser')
    app.use(bodyParser.json())
    app.use(bodyParser.urlencoded({ extended: true }));
    const path=require('path')
    app.use(express.static(path.join(__dirname, "./public/")));
    app.use(cors({origin:'http://localhost:3000'}))
    app.use('/blog',route)
    app.listen(4000,()=>{
      console.log('listening on port 4000')
    })

用户使用表单上传文件，并使用反应钩子设置字段的状态。

 const Addimage=()=> {

const [file, setfile] = useState('')
const {addImage}=useContext(Globalcontext)

const handleSubmit=(e)=>{
e.preventDefault()
const formData = new FormData()
formData.set('file', file[0])
// console.log([...formData])

const addedValue={
   formData
}

addImage(addedValue)

setfile('')
}
    return (
        <div>
            <form onSubmit={handleSubmit} encType="multipart/form-data">
                <input type="file" name="mfile" onChange={(e)=>{setfile(e.target.files)}} />
                <button type='submit' value='submit'>Add Image</button>
            </form>
        </div>
    )
}

export default Addimage

我在 axios 发布请求中添加了标头，但它不起作用，我尝试将 multipart/form-data 添加到表单本身。 post请求发送如下：

    function addImage(imagedetail){
    axios.post('http://localhost:4000/blog/upload',imagedetail).then(res=>{
    dispatch({
      type:'ADD_IMAGE',
      payload:res.data
    })
    
  }).catch(error=>{ 
    console.log(error)
  })
}

这是我在服务器端的：

   exports.addImage=(req,res)=>{
   if(req.file){
       console.log('success')
   }
   else{
       console.log('upload a file')
   }
   console.log(req.file)

   }

我已将路由中的 multer 中间件设置为：

const storage = multer.diskStorage({
    destination: "./public/uploads",
    filename:function(req,file,cb){
        cb(null,"IMAGE-" + Date.now() + path.extname(file.originalname));
    }
})

const upload=multer({
    storage:storage
})
router.route('/upload',upload.single('mfile')).post(addImage)

【问题讨论】：

标签： javascript node.js express multipartform-data multer

【解决方案1】：

您可以尝试更改此设置

app.use(bodyParser.urlencoded({ extended: true }));

到这里

app.use(bodyParser.urlencoded({ extended:false }));

我认为这将帮助您解决问题。

【讨论】：