文件上传错误：Postman测试正常但前端无法上传图片问题求助

问题根本原因 #

1. 后端配置的multer中间件要求接收multipart/form-data格式的文件上传，指定接收的文件字段名为image，但你当前前端发送的是application/json格式的请求，文件仅被转为base64字符串放在请求体中，multer无法识别解析，所以req.file一直为空，自然无法完成上传。
2. 后端编辑接口存在模型调用不统一的问题，同时混用了AuthUser和User两个模型，会导致查询、更新逻辑异常。

修改方案 #

第一步：修改EditProfile组件，存储原始文件对象

你当前只存储了base64格式的预览图用于页面展示，还需要存储用户选中的原始File对象用于提交：

// 新增state存储选中的原始文件
const [selectedFile, setSelectedFile] = useState(null);

// 修改imageHandler逻辑
const imageHandler = (e) => {
  const file = e.target.files[0];
  if (!file) return;
  // 存储原始文件对象
  setSelectedFile(file);
  // 原有预览逻辑保留
  const reader = new FileReader();
  reader.onload = () => {
    if (reader.readyState === 2) {
      setImg(reader.result);
      setEdit(true);
    }
  };
  reader.readAsDataURL(file);
};

// 修改changeInfo，把选中的文件传给updateProfile
const changeInfo = () => {
  dispatch(
    updateProfile({
      name,
      bio,
      phone,
      email,
      password,
      id,
      selectedFile,
      navigate,
    })
  );
};

第二步：重写updateProfile方法，使用FormData提交请求

不要手动指定Content-Type，axios会自动为FormData请求添加带正确boundary的请求头：

export const updateProfile = ({
  name,
  bio,
  phone,
  email,
  password,
  id,
  selectedFile,
  navigate,
}) => {
  return async (dispatch) => {
    try {
      // 构造FormData对象
      const formData = new FormData();
      formData.append('name', name);
      formData.append('bio', bio);
      formData.append('phone', phone);
      formData.append('email', email);
      formData.append('password', password);
      // 有选中文件时添加到FormData，字段名必须为image，和后端multer配置对应
      if (selectedFile) {
        formData.append('image', selectedFile);
      }

      const res = await axios.put(`/profile/edit/${id}`, formData);

      dispatch({
        type: PROFILE_UPDATE_SUCCESS,
        payload: res.data,
      });

      navigate('/profile');
    } catch (error) {
      console.log(error);
    }
  };
};

第三步：修复后端编辑接口的模型调用错误

把/profile/edit/:id接口里的AuthUser统一改为User，和其他接口保持一致：

app.put('/profile/edit/:id', upload.single('image'), auth, async (req, res) => {
  const { name, bio, email, phone, password } = req.body;

  try {
    // 把AuthUser改为User
    let user = await User.findById(req.params.id);

    // 原有后续逻辑不变
    ...
  }
  ...
})

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