通过Axios POST向Node.js传图片遇req.files/req.body为空问题求助

问题根源 #

Express默认不解析multipart/form-data格式的请求，必须依赖第三方中间件处理文件上传；另外前端手动指定Content-Type会丢失自动生成的boundary，导致后端无法解析请求体。

修复步骤 #

1. 后端配置multer中间件 #

Express本身不支持文件上传解析，需要使用multer中间件来处理multipart/form-data请求：

• 先安装multer：

npm install multer

• 修改后端路由代码，引入并配置multer：

const express = require('express');
const router = express.Router();
const multer = require('multer');

// 配置文件存储规则：指定保存目录和文件名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 确保此目录已存在，否则需提前创建
    cb(null, `${__dirname}/images/profile_pictures/`);
  },
  filename: function (req, file, cb) {
    const id = req.params.id;
    cb(null, `pfp_${id}`);
  }
});

const upload = multer({ storage: storage });

// 使用upload.single('image')处理单个文件，参数对应前端FormData的key
router.post("/editprofile/:id", upload.single('image'), async (req, res) => {
  const id = req.params.id;
  console.log(req.file); // 单个文件用req.file，多文件用req.files
  console.log(req.body); // 非文件字段会被解析到这里

  // 可选：验证文件是否为图片
  if (!req.file?.mimetype.startsWith('image/')) {
    console.log("不是图片文件");
    return res.sendStatus(400);
  }

  // 文件已被multer自动保存到指定目录
  res.sendStatus(200);
});

module.exports = router;

2. 前端调整Axios请求 #

去掉手动设置的Content-Type，Axios会根据FormData自动生成包含boundary的正确请求头；同时优化FormData的调试方式：

import "./App.css";
import React, { useState } from "react";
import axios from "axios";

function App() {
  const [image, setImage] = useState(null); // 初始值设为null更合理
  function handleImage(e) {
    console.log(e.target.files);
    setImage(e.target.files[0]);
  }
  function handleApi() {
    if (!image) return; // 避免未选择文件就提交
    const formData = new FormData();
    formData.append("image", image);
    
    // 正确调试FormData的方式（直接console.log(formData)看不到内容）
    console.log('选中的文件:', formData.get('image'));
    // 遍历查看所有字段
    for (let [key, value] of formData.entries()) {
      console.log(key, value);
    }

    axios
      .post("http://localhost:3001/users/editprofile/1", formData)
      .then((res) => {
        console.log(res);
      })
      .catch(err => console.error('请求错误:', err));
  }
  return (
    <div>
      <input type="file" name="file" onChange={handleImage} accept="image/*" /> {/* 限制仅选择图片 */}
      <button onClick={handleApi}>submit</button>
    </div>
  );
}

export default App;

关键注意点 #

• upload.single('image')中的参数必须和前端formData.append("image", image)的key完全一致；
• 确保后端指定的文件存储目录已存在，否则multer会抛出错误；
• 前端不要手动设置multipart/form-data的Content-Type，Axios会自动生成带boundary的请求头，手动设置会导致后端解析失败。

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