MERN项目使用express-fileupload上传图片时后端接收为null问题求助

核心错误点 #

• 前端handleImg函数取值键不匹配：调用formData.append()时用的键是image，后续formData.get()取的是不存在的键file，导致取值异常
• 提交时未使用FormData承载全部参数：multipart/form-data格式的请求必须整体用FormData对象传输所有字段，直接传普通JS对象infos会被axios序列化为JSON，无法被express-fileupload识别
• 请求头拼写错误：正确的请求头键是Content-Type，不是Content_Type，且使用axios提交FormData时不需要手动指定该头，axios会自动生成带boundary的合法请求头

修正后代码 #

前端代码 #

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

const handleImg = (e) => {
    const { files } = e.target
    // 直接存储File对象即可，不需要在这里创建FormData
    setInfos({ ...infos, image: files[0] })
}

const submit = async(e) => {
 e.preventDefault()
 console.log(infos)
 try{
  // 提交前创建FormData，把所有字段都塞进去
  const formData = new FormData()
  formData.append('title', infos.title)
  formData.append('text', infos.text)
  formData.append('image', infos.image)
  // 直接传FormData，不需要手动写Content-Type头
  await axios.post('/upload', formData)
 }
  catch(err) console.log(err)
}


<form onSubmit={submit}>
 <input
      type='file'
      accept='image/*'
      name='image'
      onChange={handleImg}
    />
  <!-- 配套的文本输入框，和infos字段对应 -->
  <input type="text" name="title" value={infos.title} onChange={e=>setInfos({...infos, title:e.target.value})} />
  <textarea name="text" value={infos.text} onChange={e=>setInfos({...infos, text:e.target.value})} />
  <button type="submit">提交</button>
</form>

后端优化代码 #

需要提前确保上传目录存在，否则文件移动操作会报错：

import fileUpload from 'express-fileupload'
import fs from 'fs'
import path from 'path'

// 可按需配置文件上传限制
app.use(fileUpload({
  limits: { fileSize: 5 * 1024 * 1024 } // 单文件最大5MB
}))

// 自动创建不存在的上传目录
const uploadDir = path.join(__dirname, '/client/uploads/')
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true })
}

app.post('/upload', (req, res) => {
 console.log(req.files)  // 可正常获取到image文件对象
 console.log(req.body)   // 可正常获取到title、text文本字段
 if(req.files?.image){
  const {image} = req.files
  image.mv(path.join(uploadDir, image.name), (err) => {
    if(err) return res.status(500).send(err)
    res.send('上传成功')
  })
 } else {
  res.status(400).send('未检测到上传的图片')
 }
})

内容的提问来源于stack exchange，提问作者A.Anvarbekov