Как загрузить файл из React App в Express API с помощью axios?

Question

Я раньше создал реактив-приложение и создал форму для поста.И я хочу, чтобы сообщение можно загрузить изображение (эскиз).Все данные я отправил в API, который я создал с помощью Express.Но если я консоль журнала миниатюру, API получил неопределенный результат.

1-й внутри моего поста API, я создаю функцию для инициализации магазина, используя multer:

const storage = multer.diskStorage({
  destination: "./public/uploads/",
  filename: function(req, file, cb){
     cb(null,"IMAGE-" + Date.now() + path.extname(file.originalname))
  }
})

const upload = multer({
  storage: storage,
  limits:{fileSize: 1000000},
}).single("thumbnail")

Затем я создал маршрут для редактирования поста (пример):

router.put('/post', (req, res) => {
  if(!req.query.id){
    return res.status(400).send('Missing URL parameter: id')
  }

  upload(req, res, (err) => {
    console.log(req.file)
  })
})

Тогда вот мой код из приложения activ-app:

import React, { Component } from 'react'
import Swal from 'sweetalert2'
import { Alert, Button, Card, CardBody, CardHeader, Col, Form, FormGroup, Label, Input, Row } from 'reactstrap'
import Editor from 'react-simplemde-editor'
import dateFormat from 'dateformat'
import 'simplemde/dist/simplemde.min.css'
import AuthService from '../../../auth'
import './EditPosts.scss'

export default class EditPosts extends Component {
  constructor(props){
    super(props)
    let now = new Date()
    this.state = {
      postId: this.props.match.params.id,
      title: '',
      content: '',
      description: '',
      thumbnail: '',
      author: '',
      updatedAt: dateFormat(now, "mmmm dS, yyyy"),
      imagePreviewUrl: '',
      editError: ''
    }

    this.onTextboxChangeTitle = this.onTextboxChangeTitle.bind(this)
    this.onTextboxChangeContent = this.onTextboxChangeContent.bind(this)
    this.onTextboxChangeDescription = this.onTextboxChangeDescription.bind(this)
    this.onUploadboxChange = this.onUploadboxChange.bind(this)
    this.onEdit = this.onEdit.bind(this)
    this.Auth = new AuthService()
  }
  onTextboxChangeTitle(event){
    this.setState({
      title: event.target.value
    })
  }

  onTextboxChangeContent(value) {
    this.setState({
      content: value
    })
  }

  onTextboxChangeDescription(event){
    this.setState({
      description: event.target.value
    })
  }

  onUploadboxChange(e){
    e.preventDefault()

    let reader = new FileReader()
    let thumbnail = e.target.files[0]

    reader.onloadend = () => {
      this.setState({
        thumbnail: thumbnail,
        imagePreviewUrl: reader.result
      });
    }

    reader.readAsDataURL(thumbnail)
  }

  componentDidMount(){
    this.getPost()
  }

  getPost(){
    this.Auth.post(this.state.postId)
      .then((res) => {
        this.setState({
          title: res.title,
          content: res.content,
          description: res.description,
          thumbnail: res.thumbnail,
          author: res.author
        })
      })
  }

  onEdit(e){
    e.preventDefault()

    const {
      postId,
      title,
      content,
      description,
      thumbnail,
      author,
      updatedAt
    } = this.state

    const formData = new FormData()
    formData.append('thumbnail', thumbnail)

    this.Auth.edit(postId, title, content, description, formData, author, updatedAt)
      .then(res => {
        if(res.status >= 200 && res.status < 300){
          Swal({
            position: 'top-end',
            type: 'success',
            title: 'Your post has been update!',
            showConfirmButton: false,
            timer: 1500
          }).then(res =>{
            // window.location.href = '/posts'
          })
        }
      })
  }

  render(){
    let { imagePreviewUrl, editError, title, content, description, thumbnail } = this.state
    let $imagePreview = thumbnail
    if (imagePreviewUrl) {
      $imagePreview = (<img src={imagePreviewUrl} alt="" />)
    } else {
      $imagePreview = (<div className="previewText">Please select an Image for Post Cover</div>);
    }
    return(
      <div className="animated fadeIn">
        <Card>
          <CardHeader>Edit post</CardHeader>
          <CardBody>
            <Form onSubmit={this.onEdit}>
              {
                (editError) ? (
                  <Alert color="danger">{editError}</Alert>
                ): null
              }
              <Row>
                <Col md={7}>
                  <FormGroup>
                    <Label for="title">Edit Title</Label>
                    <Input type="text" autoComplete="title" placeholder="Post Title" value={ (title) ? title : '' } onChange={this.onTextboxChangeTitle} />
                  </FormGroup>
                  <FormGroup>
                    <Label for="description">Description</Label>
                    <Input type="textarea" autoComplete="description" placeholder="Description" value={ (description) ? description : '' } onChange={this.onTextboxChangeDescription} />
                  </FormGroup>
                  <FormGroup>
                    <Label for="content">Content</Label>
                    <Editor 
                      autoComplete="content"
                      value={ (content) ? content : '' }
                      onChange={this.onTextboxChangeContent}
                      options={
                        { spellChecker: false }
                      }
                    />
                  </FormGroup>
                </Col>
                <Col md={5}>
                  <FormGroup>
                    <Label for="thumbnail">Image Cover</Label>
                    <Input type="file" autoComplete="thumbnail" onChange={this.onUploadboxChange} />
                  </FormGroup>
                  <div className="imgPreview">
                    {$imagePreview}
                  </div>
                </Col>
              </Row>
              <Row>
                <Col className="text-right">
                  <Button color="primary" className="px-4" type="submit" value="Submit">Save</Button>
                </Col>
              </Row>
            </Form>
          </CardBody>
        </Card>
      </div>
    )
  }
}

Вот функция для подключения к API:

edit(id, title, content, description, thumbnail, author, updatedAt){
    return axios.put('http://localhost:3000/post?id='+id, {
      title,
      content,
      description,
      thumbnail,
      author,
      updatedAt
    })
    .then(this._checkStatus)
    .then(res => {
      return res
    })
    .catch(err => {
      throw err;
    })
  }

Я всегда получаю неопределенное значение при загрузке изображения

Я что-то пропустил в процессе загрузки изображения?Если кто-то знает, пожалуйста, помогите.Благодаря.