я получаю req.file не определено, когда я пытаюсь отправить запрос от клиента

Question

теперь, когда я пытаюсь сделать пост, и пользователь может отправить изображение с его функциональностью поста для моего веб-приложения, я использую реагирование, узел, избыточность, mogodb и express. я заканчиваю sh бэкэнд-часть, и когда я пробую его с помощью почтальона, он работает нормально, но когда я пробую его со стороны клиента, он продолжает давать мне req.file undefined, я использую multer, чтобы выложить мое изображение

это мой компонент, как вы видите, я пытался использовать другой метод для отправки моих данных, но он дает мне ту же ошибку

import React, { Fragment, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { creatNewPost, addPostPhoto } from '../../actions/post';

const WritPost = ({
  auth: { user, loading, isAuthenticated },
  post: { post },
  creatNewPost,
  addPostPhoto,
}) => {
  let [formData, setFormData] = useState('');
  // useEffect(() => {}, []);
  let [avatar, setAvatar] = useState(null);
  let userName;
  if (!loading && isAuthenticated) {
    userName = user.name.trim().split(' ');
  }
  const { body, photo } = formData;
  const handleOnChange = (e) => {
    if ([e.target.name] === 'photo') {
      // setFormData({ ...formData, [e.target.name]: e.target.files[0] });
      setAvatar(e.target.files[0]);
    } else {
      setFormData(e.target.value);
    }
  };
  // console.log(photo);
  const handleOnSubmit = async (e) => {
    e.preventDefault();
    // const form = new FormData();
    // form.append('body', body);
    // form.append('photo', photo);
    creatNewPost(formData, avatar);
  };

  return (
    <Fragment>
      {!loading && isAuthenticated && (
        <Fragment>
          <form className='col-12' onSubmit={(e) => handleOnSubmit(e)}>
            <div className='text-container col-12'>
              <textarea
                className='post-area'
                placeholder='Write Your Post...'
                name='body'
                onChange={(e) => handleOnChange(e)}
                required
              ></textarea>
            </div>
            <div className='col-12'>
              <div className='upload-btn-wrapper'>
                <button className='btn'>
                  <i className='fas fa-image'></i>
                  <input
                    type='file'
                    name='photo'
                    onChange={(e) => handleOnChange(e)}
                    className='uplaod-file'
                  />
                </button>
              </div>
              <button
                type='submit'
                className='btn btn-primary btn-raised post-button'
              >
                Post
              </button>
            </div>
          </form>
        </Fragment>
      )}
    </Fragment>
  );
};

WritPost.propTypes = {
  auth: PropTypes.object.isRequired,
  post: PropTypes.object.isRequired,
  creatNewPost: PropTypes.func.isRequired,
  addPostPhoto: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  post: state.post,
});

export default connect(mapStateToProps, { creatNewPost, addPostPhoto })(
  WritPost
);

это мое действие

export const creatNewPost = (formData, avatar) => async (dispatch) => {
  const formDatas = new FormData();
  formDatas.append('photo', avatar);
  formDatas.append('body', formData);

  console.log(formDatas);
  try {
    // console.log(form);
    const res = await axios.post('/post', formDatas);
    console.log(res.data);
    dispatch({
      type: CREATE_POST,
      payload: res.data,
    });
  } catch (err) {
    // const error = err.response.data.errors;
    // console.log(error);
    dispatch({
      type: ERROR_CREATE_POST,
    });
  }
};

это может быть backend

exports.createPost = async (req, res) => {
  try {
    let buffer;
    if (req.file) {
      buffer = await sharp(req.file.buffer)
        .resize({ width: 1000, height: 700 })
        .png()
        .toBuffer();
    }
    console.log(buffer);
    const { body } = req.body;

    if (buffer !== undefined) {
      const post = new Post({
        body,
        photo: buffer,
        user: req.user,
      });
      await post.save();
      res.json(post);
    } else {
      const post = new Post({
        body,
        photo: null,
        user: req.user,
      });
      await post.save();
      res.json(post);
    }
    // await post.save();
    // res.json(post);
  } catch (err) {
    console.error(err.message);
    res.status(500).json({ msg: 'Server Error' });
  }
};

это мой маршрут

router.post('/post', auth, upload.single('photo'), createPost);

это изображение от почтальона, мой маршрут работает на почтальоне