如何在前端的Nodejs（Multer）中修复``无法读取未定义的属性''路径''（使用Reactjs和axios）''

Question

我的服务器运行得很好，使用Postman时我也可以上传带有其他数据字段的图像，但是在使用React的前端中，当我使用axios进行POST请求时出现服务器错误（500）。

这是我的api文件

const multer = require('multer');
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads');
  },
  filename: function (req, file, cb) {
    cb(null, new Date().toISOString() + file.originalname);
  }
});

const fileFilter = (req, file, cb) => {
  if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
    cb(null, true);
  } else {
    cb(new Error('Only .jpeg or .png files are accepted'), false);
  }
};

const upload = multer({
  storage: storage,
  limits: {
    fileSize: 1024 * 1024 * 6
  },
  fileFilter: fileFilter
});
//@route    POST api/posts
//@desc     Create a post
//@access   Private
router.post(
  '/',
  upload.single('docImage'),
  [
    auth,
    [
      check('text', 'Text is required')
        .not()
        .isEmpty()
    ]
  ],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array });
    }

    try {
      // console.log(req.body); // THIS IS undefined
      const user = await User.findById(req.user.id).select('-password');
      const newUserdata = new Userdata({
        text: req.body.text,
        year: req.body.year,
        docImage: req.file.path,   //Error occurs here : Cannot read property 'path' of undefined
        disabledata: req.body.disabledata,
        name: user.name,
        avatar: user.avatar,
        user: req.user.id
      });

      const post = await newUserdata.save();
      res.json(post);
    } catch (err) {
      console.error(err.message);
      return res.status(500).send('Server Error');
    }
  }
);

这是我用于发布请求的功能

//Create
export const createUserdata = (
  formData,
  history,
  edit = false
) => async dispatch => {
  try {
    const config = {
      headers: {

      }
    };

    const res = await axios.post('/api/userdata', formData, config);
    console.log(res);
    dispatch({
      type: GET_USERDATA,
      payload: res.data
    });

    dispatch(
      setAlert(edit ? 'Userdata Updated' : 'Userdata Created', 'success')
    );

    if (!edit) {
      history.push('/dashboard');
    }
  } catch (err) {
    const errors = err.response.data.errors;

    if (errors) {
      errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
    }
    dispatch({
      type: USERDATA_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    });
  }
};

这是我用来发送请求的React Form

    import { createUserdata } from '../../actions/userdata';

const CreateUserdata = ({ createUserdata, history }) => {
  const [formData, setFormData] = useState({
    text: '',
    year: '',
    disabledata: false,
    docImage: ''
  });



  const {
    text,
    year,
    disabledata,
    docImage
  } = formData;

  const onChange = e => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
    // console.log(formData);
  };

  const onSubmit = e => {
    e.preventDefault();
    console.log(formData);
    // console.log(req.body);
    createUserdata(formData, history);
  };

  return (
    <Fragment>
      <h1 className='large text-primary'>Create Your Profile</h1>
      <p className='lead'>
        <i className='fas fa-user' /> Let's add some information to your profile
      </p>
      <small>* = required field</small>
      <form
        className='form'
        onSubmit={e => onSubmit(e)}
        encType='multipart/form-data'
      >
        <div className='form-group'>
          Serial No.
          <input
            type='text'
            placeholder='Serial No.'
            name='text'
            value={text}
            onChange={e => onChange(e)}
          />
          <small className='form-text'>
            Could be the defined format of serial no
          </small>
        </div>
        <div className='form-group'>
          Year of Birth
          <input
            type='date'
            placeholder='Year of Birth'
            name='year'
            value={year}
            onChange={e => onChange(e)}
          />
        </div>

        <div className='form-group'>
          Upload FIR File
          <input
            type='file'
            name='file'
            onChange={e => {
              const vall = e.target.files[0];
              setFormData(prevState => {
                return { ...prevState, docImage: vall };
              });
            }}
          />
        </div>


        <input type='submit' className='btn btn-primary my-1' />
        <Link to='/dashboard' className='btn btn-light my-1'>
          Go Back
        </Link>
      </form>
    </Fragment>
  );
};

CreateUserdata.propTypes = {
  createUserdata: PropTypes.func.isRequired
};

export default connect(
  null,
  { createUserdata }
)(withRouter(CreateUserdata));

请帮助我，这是最近两天以来的事情。

这也是我的减速机

import {
GET_USERDATA,
  USERDATA_ERROR,
  GET_USERSDATA,
} from '../actions/types';

const initialState = {
  userdata: null,
  usersdata: [],
  loading: true,
  error: {}
};

export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case GET_USERDATA:
      return {
        ...state,
        userdata: payload,
        loading: false
      };
    case GET_USERSDATA:
      return {
        ...state,
        usersdata: payload,
        loading: false
      };
    case USERDATA_ERROR:
      return {
        ...state,
        error: payload,
        loading: false
      };
    default:
      return state;
  }
}