穆特未在React中保存图像文件

Question

我正在尝试将图像文件保存到文件夹，但是当我使用文件提交表单时，没有错误并且文件没有保存，这是我的当前代码，我尝试更改目标位置以保存文件文件，仍然无法正常工作。我还尝试过更改react文件中的名称以使其正常工作，但仍然没有成功。

反应成分

import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types'
import {connect} from 'react-redux';
import {userPhoto} from '../../actions/profile'
import axios from 'axios';

const AddProfile = ({userPhoto}) => {
  const [file, setFile] = useState('');
  const [filename, setFilename] = useState('Choose File');


  const onChange = e => {
    setFile(e.target.files[0]);
    setFilename(e.target.files[0].name);
  };

  const onSubmit = async e => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', file);
    userPhoto({formData})
  };

  return (
    <Fragment>
      <form onSubmit={onSubmit} >
        <div className='custom-file mb-4'>
          <input
            type='file'
            className='custom-file-input'
            id='customFile'
            onChange={onChange}
            name="file"
          />
          <label className='custom-file-label' htmlFor='customFile'>
            {filename}
          </label>
        </div>


        <input
          type='submit'
          value='Upload'
          className='btn btn-primary btn-block mt-4'
        />
      </form>
    </Fragment>
  );
};

AddProfile.propTypes = {
  userPhoto: PropTypes.func.isRequired,
}

export default connect(null, {userPhoto})(AddProfile);

userPhoto操作

export const userPhoto = ({formData}) => async dispatch => {
    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    };

    try {
      const res = await axios.post('/userphoto', formData, config)
    } catch (error) {
      console.log('error')
    }
} 

后端文件

const router = express.Router();
const multer = require('multer')
const path = require('path')


const storage = multer.diskStorage({
  destination: function(req, res, cb){
      cb(null, `${__dirname}`)
  },
  filename: function(req, files, cb){
      cb(null, files.fieldname + '-' + Date.now()+ path.extname(files.originalname))
  }

})



const upload = multer ({storage, limits: {fieldSize: 10000000}, fileFilter: function(req, file, cb){checkFileType(file, cb)}}).array('file')


function checkFileType(file, cb){

  const filetypes = /jpeg|jpg|png|gif/;

  const extname = filetypes.test(path.extname(file.originalname).toLocaleLowerCase())

  const mimetype =filetypes.test(file.mimetype);

  if(mimetype && extname){
      return cb(null, true)
  } else {
      cb('Error: image only')
  }
}





router.post('/userphoto', upload, (req, res) => { 

})