使用axios将图像发送到php文件

Question

I've created form that lets user to drop some images and preview them. Now I want to send these images to my database. I'm using axios for sending all my data to php file. Here is my component that collects images:

    import React from 'react';
    import Dropzone from 'react-dropzone';
    import {ImagePreview} from './ImagePreview';

    export const ImageInput = (props) => {
      const imagePreviews = props.images.map(image => {
        return <ImagePreview key={image.id} image={image} onDelete={props.deleteImage}/>
      })

  return (
    <div>
      <Dropzone
        className="dropzone"
        multiple={true}
        accept="image/*"
        onDrop={props.addImage}>
        <p>drop here</p>
      </Dropzone>
      <ul>
        {imagePreviews}
      </ul>
    </div>
  )
}

I'm storing them in state inside parent component using this function:

addImage = (images) => {

    const { recipe } = this.state;
    images.map(image => {
      let img = {id:Math.random().toString(36).substr(2, 9),image:image}
      recipe.images = [...recipe.images,img]
    })
    this.setState({ recipe });
  }

and here is how I'm displaying them to user:

import React,{Component} from 'react';

export class ImagePreview extends React.Component {
   constructor() {
     super();
     this.state= {imagePreviewUrl: ''}
   }

   componentWillMount() {
     let reader = new FileReader();
     reader.readAsDataURL(this.props.image.image)
     reader.onloadend = () => {
       this.setState({imagePreviewUrl: reader.result})
     }
   }
   render(){
     return (
       <li className="">
         <img className="image-preview" src={this.state.imagePreviewUrl} />
         <button onClick={()=>this.props.onDelete(this.props.image.id)}>delete </button>
       </li>
     )
   }
}

How should I send them to my php file?