React 中的 formData，发送到后端 Express 收到 null

Question

我正在我的 mern 应用程序中上传图片，我正在使用 express-fileupload 包，在前端我在 FormData 中发送图片，但后端收到 null。

前端

const [infos, setInfos] = useState({title: '', text: '', image: ''})

const handleImg = (e) => {
    const { files } = e.target
    const formData = new FormData()
    formData.append('image', files[0])
    setInfos({ ...infos, image: formData.get('file') }) // image is null if i put formData itself 
  }

const submit = async(e) => {
 e.preventDefault()
 console.log(infos) // {title: 'titlw', text: 'text', image: File}
 try{
  await axios.post('/upload', infos, {headers: {'Content_Type': 'multipart/form-data'}})
 }
  catch(err) console.log(err)
}


<form onSubmit={submit} enctype='multipart/form-data' >
 <input
      type='file'
      accept='image/*'
      name='image'
      onChange={handleImg}
    />
</form>

后端

import fileUpload from 'express-fileupload'
app.use(fileUpload())

app.post('/upload', (req, res) => {
 console.log(req.files)  // undefined
 console.log(req.body)   // {title: 'value', text: 'value', image: ''}
 // if(req.files){
 //  const {image} = req.files
 //  image.mv(__dirname+'/client/uploads/'+image.name)
 }
})

当我在前端检查infos 时，有数据，但是当我请求Express 后端时，所有文本信息都在那里，但req.body 中的图像为空，req.files 未定义。我昨天花了几乎所有的时间，仍然无法解决。

Answer 1

也许你发送了错误的 const，你设置了“infos”但你发送了“info”。