使用multer实现图片上传时出现'originalname' of undefined错误如何解决

你遇到的"originalname" of undefined报错，本质是req.file为undefined导致的空指针异常，共有两处核心错误需要修复： #

1 修复服务端路由的中间件挂载错误 #

你错误地将multer中间件放在了router.route()的参数中，导致multer没有生效，无法解析上传的文件，原有代码：

router.route('/add', upload.single("articleimage")).post((req, res) => {

修改为：

// route方法仅传入路径，中间件放到post方法的参数中
router.route('/add').post(upload.single("articleimage"), (req, res) => {

2 修复前端FormData的文件字段名 #

服务端upload.single("articleimage")配置的是接收名为articleimage的单文件，但你前端提交FormData时用的字段名是image，字段名不匹配会导致multer过滤掉该文件，原有代码：

formData.append("image", image)

修改为：

formData.append("articleimage", image)

可选优化项 #

• 修正文件输入框的无效属性：将<input type="file" filename="articleimage" onChange={selectedFile}/>中的filename改为标准的name属性：

  <input type="file" name="articleimage" onChange={selectedFile}/>
  

• 给axios请求显式指定请求头，避免部分环境下无法正确识别formData格式：

  axios.post('http://localhost:4000/clients/add', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  

• 服务端新增空校验，避免未上传文件时直接报错：

  router.route('/add').post(upload.single("articleimage"), (req, res) => {
    if (!req.file) {
      return res.status(400).json('error: 请上传图片文件')
    }
    // 原有创建newClient、保存数据的逻辑
  })
  

内容的提问来源于stack exchange，提问作者Chen