React使用Axios提交带文件的FormData时后端接收为空如何解决？

问题修复方案 #

1. 前端Axios请求头修复 #

你在submit.js中手动设置了Content-Type: multipart/form-data，这是错误的：

• 传FormData参数时，Axios会自动给请求加上带正确boundary分隔符的multipart/form-data头，手动设置会丢失boundary参数，导致后端无法正确解析表单数据
• 直接删除headers里的'Content-Type': 'multipart/form-data'即可：

// 修正后的submit.js
export async function SubmitAssignmentApi(formData) {
  try {
    const config = {
      headers: {
        Authorization: `Bearer ${token}`
      }
    };
    const response = await axios.post('http://localhost:5000/api/v1/submission/', formData, config);
    return response.data;
  } catch (err) {
    console.log(err);
  }
}

2. 后端multer中间件注册位置修复 #

你当前的multer用法完全无效，multer是express中间件，需要注册到路由上，且必须在express-validator的校验逻辑之前执行，因为FormData的字段需要先被multer解析到req.body和req.file后，校验逻辑才能读到值：

• 第一步：修改路由代码，把multer中间件加到路由栈最前面

const upload = multer({ dest: 'uploads/' }); // 可移到路由文件里，或者从其他文件导出后引入
const SubmitAssignment = require('../../../../controller/api/v1/assignment/submission');
router.post('/', 
  upload.single('file'), // multer先解析FormData
  [
    body('assignmentId').not().isEmpty().withMessage('Assignment ID is required'),
    body('ta_id').not().isEmpty().withMessage('Teaching Assistant Id is required'),
  ], 
  authenticateUserToken, 
  SubmitAssignment.submit
);

• 第二步：删除控制器里无用的upload.single('file');代码，现在multer已经完成了解析，直接就能读到req.body和req.file：

// 修正后的控制器代码
exports.submit = async(req, res) => {
  try {
    console.log(req.body); // 可正常拿到ta_id、assignmentId
    console.log(req.file); // 可正常拿到上传的文件信息

    const error = validationResult(req);
    if (!error.isEmpty()) {
      return res.status(422).json({
        type: 'warning',
        message: error.array()[0].msg,
      });
    }

    // 后续业务逻辑

   } catch (err) {
    console.log(err);
    return res.status(500).json({
      success: false,
      message: 'Server Error',
    });
  }
};

其他注意点 #

• 确认提交时data.assigned_TA和id两个参数有实际有效值
• 如果后端配置了跨域规则，确认已放行Authorization请求头

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