Unable to upload files from disk to server using FileReader

Question

I am working on a form for uploading files from a local disk within the react component. After uploading the file, it should be sent to the server using the POST request, where it is processed using express-fileupload to upload to the server. The server responds that the request is too large:

PayloadTooLargeError: request entity too large

Here is the component:

import React, { Component } from 'react';
import axios from 'axios';


class FileUpload extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sendImage: null
    };
    this.openFile = this.openFile.bind(this);
    this.sendFile = this.sendFile.bind(this);
  }
  onChange = (e) => {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onloadend = () => {
      this.setState({ sendImage: reader.result })
    }
    reader.readAsDataURL(file);
  }
  openFile(e) {
    this.refs.fileUploader.click();
  }
  sendFile = () => {
    axios.post(this.props.API_URL + "upload/news", { data: this.state.sendImage })
      .then(res => {
      })
  }  
  render() {
    return (
      <>
        <button className="xbutton" onClick={this.sendFile} >Upload</button>
        <button className="xbutton" onClick={this.openFile} >Open</button>
        <
          input
          type="file"
          name="sampleFile"
          ref="fileUploader"
          defaultValue=""
          onChange={e => this.onChange(e)}
        />
      </>
    );
  }
}

export default FileUpload;

Please tell me what the error is, and is it possible to upload files using these tools? Thanks!