React表单上传图片后端接收大小为0字节问题排查求助

首先你的代码存在一个明确的可优化点：使用axios发送FormData类型的请求时，没有显式指定对应请求头，会导致部分场景下后端无法正确解析二进制文件内容，从而得到0字节的空文件。

可直接尝试的修复方案 #

修改你的handleSubmit函数中axios请求部分，补充请求头配置：

axios
  .post(url, formData, {
    // 告知后端当前请求是表单文件上传格式
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  .then((res) => {
    // 原有逻辑保持不变
  })

进一步排查步骤 #

如果修改后问题仍然存在，可以按以下顺序排查：

• 先在浏览器开发者工具的「网络」面板，找到对应的POST上传请求，查看「负载」栏中的characterpicture字段对应文件大小是否和本地文件一致：
  • 如果请求中的文件大小就是0：检查文件选择的onChange逻辑是否正确，确认data.characterPicture在提交时确实是正常的File对象（可以在handleSubmit第一行加console.log(data.characterPicture.size)打印验证）
  • 如果请求中的文件大小正常：问题出在后端
• 校验字段名一致性：确认你FormData中append的characterpicture字段名（全小写）和后端接收文件的字段名完全一致，大小写不匹配会导致后端拿不到文件
• 后端验证：用Postman直接调用你的上传接口，传入相同图片，若后端仍然收到0字节，排查后端逻辑：
  • PHP后端首先检查$_FILES数组中对应键是否存在
  • 检查上传目录的写入权限是否正常
  • 检查php.ini配置的upload_max_filesize、post_max_size是否大于上传的文件大小
  • 检查是否有中间层（如CDN、反向代理）限制了上传内容

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