AGREGAR_PRODUCTO.

JS FRONTED
import React from 'react';
import 'bootswatch/dist/flatly/bootstrap.min.css'; // Added this :boom:

import axios from 'axios';

class nuevoproductoComponent extends React.Component {

constructor(props){
    super(props);
    this.state = {
        campoNombre: "",
        selectedFile:null
    }
}

render()
{
    return(
        <div>
            <div class="col-md-5">
                <div class="card">
                    <div class="card-body">
                      
                            
                            <form                                    
                                    
                                    method="POST"
                                    enctype="multipart/form-data">

                                <input 
                                    id="inputProducto" 
                                    type="text" 
                                    placeholder="Nombre del Producto" 
                                    class="form-control" 
                                    value={this.state.campoNombre} 
                                    onChange={(value)=>this.setState({
                                            campoNombre:value.target.valu
e
                                            })}
                                /> 

                                <input 
                                    type="file" 
                                    name="file" 
                                    onChange={this.onChangeHandler}
                                />                
                           
                            
                            <button type="button" class="btn btn-primary" 
onClick={()=>this.sendSave()}>
                            Guardar Producto
                            </button>
                            </form>
                    </div>
                </div>
           </div>
        </div>
    )
}

onChangeHandler=event=>{
    //console.log(event.target.files[0])
    this.setState({
        selectedFile: event.target.files[0],
        loaded: 0,
    })
    
}

sendSave(){
    const baseUrl = "http://192.168.1.24:3000/productos/agregar_producto"
     const data = new FormData()
     data.append('file', this.state.selectedFile)
     console.log(data)
     axios.post(baseUrl, data,{})
     .then(res =>{
         console.log(res.statusText)
     })

/*const baseUrl = "http://192.168.1.24:3000/productos/agregar_producto"
const datapost = {
    name : this.state.campoNombre
}

axios.post(baseUrl,datapost)
.then(response=>{
    if(response.data.success===true){
        alert(response.data.message);
        window.location.href = "http://192.168.1.24:3001/productos"
  
    }
    else {
        alert(response.data.message)
    }
}).catch(error=>{
    alert("Error 34" + error)
})*/
}
}

export default nuevoproductoComponent;

APP.JS BACKEND

//importamos express
const express = require('express');
const app = express();
const mysql = require('mysql');
const myConnection = require('express-myconnection');
const multer = require('multer');
const cors = require('cors');

//configuramos el puerto
app.set('port',process.env.POST||3000);

//Middelewaree
app.use(express.json());
app.use(cors());

// Configurar cabeceras y cors
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Authorization, X-API-KEY, 
Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-
Request-Method');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, 
DELETE');
    res.header('Allow', 'GET, POST, OPTIONS, PUT, DELETE');
    next();
});

app.use(myConnection(mysql,{
    host:'localhost', //donde se ubica el host
    user: 'root', //usuario usado en mysql
    password: '12345678', //password usado en mysql
    port: 3306, //puerto de la base datos
    database: 'proyecto_pan',
}, 'single'));//como vamos a estar conectandonos al servidor

//Importamos rutas
const productos = require('./routes/Productos')
const insumos = require('./routes/Insumos')
const produccion = require('./routes/Produccion')

app.use('/productos', productos);
app.use('/insumos', insumos);
app.use('/produccion', produccion);

//app.use('/', (req,res)=>{
 //   res.send("Hello world from Nodejs Server")
//});

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
    cb(null, 'public')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' +file.originalname )
  }
})

const upload = multer({
    storage: storage
}).single('file')

app.post('/productos/agregar_producto',function(req, res) {
     
    upload(req, res, function (err) {
           if (err instanceof multer.MulterError) {
               return res.status(500).json(err)
           } else if (err) {
               return res.status(500).json(err)
           }
      return res.status(200).send(req.file)

    })

});

app.listen(app.get('port'),()=>{

    console.log("Inicio el servidor Node.js");
})