javascript – How to send a dropzone (react) image to my backend (laravel)

I want to receive the image through dropzone, and then take this image and send it to my backend along with other data, so far the data reaches my backend but the image does not.

link to the library that I am trying to use
https://react-dropzone-uploader.js.org/

My front end is in React
My butt is laravel

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Alert, Progress } from 'reactstrap';
import {
    Badge,
    Button,
    Card,
    CardBody,
    CardFooter,
    CardHeader,
    Col,
    Form,
    FormGroup,
    FormText,
    Input,
    Label,
    Row
} from 'reactstrap';
import { authUser, update } from '../../../functions/UsuariosFunctions';
import DropZone from './DropZone';

class Perfil extends Component {
    constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
    this.toggleFade = this.toggleFade.bind(this);
    this.handleChangeStatus = this.handleChangeStatus.bind(this);
    this.getUploadParams = this.getUploadParams.bind(this);
    this.handleSubmitDropZone = this.handleSubmitDropZone.bind(this);

    this.state = {
            user: {
                id: '',
                nome: '',
                // password: '',
        email: '',

      },
      fotoPerfil:'',
            loading: false,
            error: '',
            response: '',
            isLoading: false,
            collapse: true,
            fadeIn: true,
            timeout: 300
        };
    }

    componentDidMount() {
        this.loadData();
    }

    setLoading() {
        this.setState({ isLoading: true, error: '', response: '' });
    }

    loadData() {
        this.setLoading();
        authUser()
            .then((res) => {
                if (res) {
                    this.setState({ user: res.user, isLoading: false });
                }
            })
            .catch((err) => {
                console.log(err);
            });
    }

    toggle() {
        this.setState({ collapse: !this.state.collapse });
    }

    toggleFade() {
        this.setState((prevState) => {
            return { fadeIn: !prevState };
        });
    }

    handleChange = (event) => {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            user: {
                ...this.state.user,
                (name): value
            }
        });
  };

  /* FUNCTION DROPZONE */
  handleChangeStatus = ({ meta, file }, status) => {
    console.log(status,"Status", meta,'Meta', file,'File')
    this.setState({
      fotoPerfil:file
    })
   }
  getUploadParams = ({ meta }) => { return { url: 'https://httpbin.org/post' } }
  handleSubmitDropZone = (files, allFiles) => {
    console.log(allFiles,"FILES SUBMIT")
    /* console.log(files.map(f => f.meta)) */
      files.map( (file) =>{
            this.setState({
                fotoPerfil:file
            })
      })
    allFiles.forEach(f => f.remove())
  }
   getBase64(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      console.log(reader.result);
    };
    reader.onerror = function (error) {
      console.log('Error: ', error);
    };
 }






    handleSubmit = (event) => {
    event.preventDefault();
    /* console.log(this.getBase64(this.state.fotoPerfil,"FUNCTION BASE 64")) */

        const user = {
      id: this.state.user.id,
            nome: this.state.user.nome,
            email: this.state.user.email,
            password: this.state.user.password,
            fotoPerfil : this.state.fotoPerfil
    };
    console.log(user.fotoPerfil,"dddddddddddd")
    var formData = new FormData();
    formData.append('user',JSON.stringify(user))
    formData.append('file',(this.state.fotoPerfil))
        this.setLoading();
        update(user.id, formData)
            .then((res) => {
                this.setState({ isLoading: false });
                if (res.status == 'error') {
                    this.setState({ error: res.msg });
                } else {
                    this.setState({ response: 'Operação realizada com sucesso!' });
                }
            })
            .catch((err) => {
                this.setState({ isLoading: false });
                console.log(err);
            });
    };

    render() {
    console.log(this.state,"STATE")
        return (
            
Formulário informe seu nome informe seu e-mail {this.state.error != '' ? ( {this.state.error} ) : ( '' )} {this.state.response != '' ? ( {this.state.response} ) : ( '' )} {this.state.isLoading ? ( ) : ( '' )}
); } } export default Perfil;

php: problem loading images through dropzone VUE.js

For no apparent reason, my site returns the following error when I upload an image:

enter the description of the image here

The message says:

DOCTYPE html>