使用express-fileupload+React上传文件时req.files为空、文件进入req.body问题

你的前端代码存在3处错误，导致FormData无法正确传递文件对象，后端express-fileupload无法识别到上传的文件内容：

• 存储文件对象时额外套了一层数组，FormData append时传入数组会被强制序列化为字符串，最终变成[object File]存入请求体
• 提交函数未阻止浏览器默认表单提交行为，会导致页面刷新、异步请求异常
• 手动指定multipart/form-data请求头时缺少边界（boundary）标识，后端无法正确分割解析请求体内容

1. 修正onChange里的文件状态赋值：

const onChange = e => {
  console.log(e.target.files[0].name)
  // 去掉数组包裹，直接存File对象
  setFile(e.target.files[0]);
  setFilename(e.target.files[0].name);
};

2. onSubmit开头添加阻止默认事件逻辑，删除手动指定的请求头：

const onSubmit = async e => {
  // 新增：阻止浏览器默认表单提交
  e.preventDefault();
  const formData = new FormData(); 
  formData.append("file", file);

  if(!formData){
   console.log("empty");
  }

  try {
      // 删掉手动设置的Content-Type，浏览器会自动生成带正确边界标识的请求头
      const res = await axios.post('http://localhost:5001/up', formData);
      console.log("file read");
      console.log(res)
      const { fileName, filePath } = res.data;
  } catch (err) {
   console.log(err)
  }
};

删除未使用的multer库引入，避免和express-fileupload产生潜在冲突：
删掉import multer from "multer"这行代码即可，其余逻辑无需修改。

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