无需提交按钮实现文件上传出现Cannot read properties of undefined错误的解决

错误原因 #

前端表单中文件输入框的name属性值为upload，但后端multer的upload.single('filetoupload')指定的接收字段名是filetoupload，两者不匹配导致multer无法识别上传的文件，req.file被置为undefined，访问req.file.path时就会抛出该错误。

解决方案 #

1. 修正后端字段匹配 #

将后端路由中multer的接收字段名改为和前端一致的upload：

app.post('/fileUpload', upload.single('upload'), (req, res, next) => {
  // 先校验文件是否存在
  if (!req.file) {
    return res.status(400).send('未检测到上传文件');
  }
  
  const filepath = req.file.path;
  const filename = './public/temp/' + req.file.filename;
  const jFile = filename + '.json';

  console.log("filename: ", filename, "filepath: ", filepath, "jFile:", jFile);

  res.status(204).end();
});

2. 额外注意事项 #

• 确保multer已正确配置存储规则：如果需要将文件持久化到./public/temp目录，建议在multer初始化时直接指定存储目录，避免依赖系统临时文件的移动操作，示例：

  const multer = require('multer');
  const storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, './public/temp')
    },
    filename: function (req, file, cb) {
      cb(null, file.originalname) // 可根据需求自定义文件名规则
    }
  });
  const upload = multer({ storage: storage });
  

• 前端表单已正确设置enctype="multipart/form-data"，这部分代码无需修改，确保表单能正确提交二进制文件数据。

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