React使用axios上传文件到NodeJS后端收到空文件对象如何解决

• 直接在JSON请求体中传递File对象时，JSON序列化会自动丢弃File类的内置属性，导致后端收到空对象
• 你后端引入的express-fileupload中间件仅支持解析multipart/form-data格式的文件上传请求，无法识别JSON格式请求中的文件数据

替换原有的axios请求逻辑，使用FormData封装所有请求参数：

const upload  = async (e) => {
  e.preventDefault();
  await JWT.checkJWT();
  console.log(frontPhoto);
  // 新建FormData实例封装所有参数
  const formData = new FormData();
  formData.append('weight', weight);
  formData.append('frontPhoto', frontPhoto);
  formData.append('sidePhoto', sidePhoto);
  formData.append('backPhoto', backPhoto);
  formData.append('token', JWT.getToken());
  // 发送请求时直接传入FormData，axios会自动设置正确的请求头
  axiosReq.post("http://localhost:3001/upload-progress", formData)
  .then((response) => {
    console.log(response);
    if (response.data.statusCode === '200') {

    } else {

    }
  });
};

express-fileupload会把解析到的文件放到req.files属性中，而非req.body，普通文本参数仍然保留在req.body里，修改路由打印逻辑即可：

routerProgress.post("/upload-progress", verifyJWT, async (req, res) => {
  console.log('普通参数：', req.body);
  console.log('上传的文件：', req.files);
  // 三个文件可通过req.files.frontPhoto、req.files.sidePhoto、req.files.backPhoto获取
}

如果需要调整单文件上传大小限制，可在服务端fileUpload初始化配置中添加对应参数：

app.use(fileUpload({
    createParentPath: true,
    limits: { fileSize: 50 * 1024 * 1024 } // 示例为50MB上限
}));

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