使用FormData上传图片时控制台为空，后端接收null值求助

核心问题：请求处理逻辑错误 #

你的代码里有两个关键错误，直接导致FormData无法正确传递到后端：

1. 错误设置请求头：手动指定了'Content-Type': 'application/json'，但FormData需要浏览器自动生成带边界标识的multipart/form-data请求头，手动设置会破坏这一机制。
2. 错误序列化请求体：用JSON.stringify(payload)处理FormData，这会把FormData对象直接转成空字符串{}，完全丢失所有表单数据。

修复步骤 #

1. 修改serverInstance函数 #

调整请求头和请求体的处理逻辑，适配FormData和JSON两种场景：

import { backendApiUrl } from '../config/config';

export const serverInstance = (path, method = 'get', payload, token) => {
  let headers = {
    Authorization: `Bearer ${sessionStorage.getItem('token')}`,
    // 移除手动设置的Content-Type，让浏览器自动处理
  };
  return new Promise((resolve, reject) => {
    let fetchOptions = {
      method,
      headers,
    };
    if (payload) {
      // 区分FormData和普通JSON数据
      if (payload instanceof FormData) {
        fetchOptions.body = payload;
      } else {
        fetchOptions.body = JSON.stringify(payload);
        headers['Content-Type'] = 'application/json';
      }
    }
    fetch(backendApiUrl + path, fetchOptions)
      .then((res) => resolve(res.json()))
      .catch((err) => reject(err));
  });
};

2. 正确查看FormData内容 #

控制台直接console.log(formData)会显示空对象，这是FormData的特性，要验证内容可以用以下方式：

// 遍历所有键值对
for (const [key, value] of formData.entries()) {
  console.log(`${key}:`, value);
}
// 或者单独查看文件字段
console.log(formData.get('employeePhoto'));

3. 确保empPhoto是合法的File对象 #

确认empPhoto是通过<input type="file">获取的File实例，而不是base64字符串、图片URL等其他类型。比如：

// 假设通过ref获取文件输入框
const fileInput = document.querySelector('input[type="file"]');
const empPhoto = fileInput.files[0]; // 这才是正确的File对象

验证方法 #

修复后，打开浏览器开发者工具的Network面板，查看提交的请求：

• 确认Request Headers中的Content-Type为multipart/form-data; boundary=----WebKitFormBoundaryxxxxxx（由浏览器自动生成）
• 查看Form Data部分，确认所有字段（包括文件）都已正确携带

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