0

tengo un problema con enviar una imagen a mi base de datos de mongo, el problema yo creo que es del lado del Frontend, por que probe con postman el lado del backend haciendo una peticion POST y me funciona excelente, cuando intento subir desde el frontend la ruta que me aparece en la base de datos en la propiedad de imagen es la siguiente C:\fakepath\imagen.png la parte de envio POST con axios la tengo asi:

const handleSubmit = async() =>{
     await axios.post('http://localhost:27017/cargarproducto', form)
   }

El form es el siguiente:

    const [form,setForm] = useState({
        titulo:'',
        precio:'',
        imagen:'',
        link:'',
        descripcion:''
    })

el Formulario es el suiguiente: este es el input donde se sube la imagen:

 <input className="form-control" type="file" id="formFile" name='imagen' onChange={handleChange} accept="image/*"/>

pero dejo el formulario completo por la dudas

        <form className="form-container col-6">
            <label for="formControlInput" className="form-label">
              Titulo
            </label>
            <input
              type="text"
              className="form-control"
              id="formControlInput"
              placeholder="Titulo Producto"
              name='titulo'
              onChange={handleChange}
            />
          
            <label for="formControlInput" className="form-label">
              Precio
            </label>
            <input
              type="number"
              className="form-control"
              id="formControlInput"
              placeholder="Precio"
              name='precio'
              onChange={handleChange}
            />
 
            <label for="formControlInput" className="form-label">
              Link
            </label>
            <input
              type="text"
              className="form-control"
              id="formControlInput"
              placeholder="Link Mercado libre"
              name='link'
              onChange={handleChange}
            />

            <label htmlFor="formFile" className="form-label">
              Cargar imagen
            </label>
            <input className="form-control" type="file" id="formFile" name='imagen' onChange={handleChange} accept="image/*"/>
          <div className="form-floating">
            <label htmlFor="floatingTextarea">Descripcion del producto</label>
            <textarea
              className="form-control"
              placeholder="Leave a comment here"
              id="floatingTextarea"
              name='descripcion'
              onChange={handleChange}
            ></textarea>
          </div>
          <div className='mt-3 text-center'>
            <button type="submit" className="btn btn-success" onClick={()=>handleSubmit()}>Cargar Producto</button>
          </div>
        </form>

Yo lo unico que quiero es enviar la imagen del formulario a traves del axios, pero el problema es que me aparece cualquier ruta al subir, como puse al principio me aparece la ruta C:\fakepath\imagen.png cuando en realidad me tiene que aparece por ejemplo: http://localhost:27017/public/imagen-1644353594148.jpg, por que si hago una peticion GET no me aparece la imagen por que no encuentra la ruta

Dejo todo mi codigo por la dudas:

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import './form.css'

export const Form = () => {

    const [form,setForm] = useState({
        titulo:'',
        precio:'',
        link:'',
        imagen:'',
        descripcion:''
    })
    const [datosProduct , setDatosProduct] = useState([])

/********* */
    useEffect(()=>{
      const getPedido = async()=>{
        const datos = await axios.get('http://localhost:27017/cargarproducto')
        setDatosProduct(datos.data)
      }
      getPedido()
    })
/********* */

    const handleChange = (e) =>{
        setForm({
            ...form,
            [e.target.name]:e.target.value,
        })
    }

    const handleSubmit = async() =>{
        await axios.post('http://localhost:27017/cargarproducto', form)
    }


  return (
    <div className="row container m-auto">

    {
      datosProduct.map(x=>(
        <div>
          <img src={`${x.imagen}`}/>
        </div>
      ))
    }

    <h2 className='text-center col-12 mt-5'>Cargar Producto</h2>
      <div className='col-12 d-flex justify-content-center'>
        <form className="form-container col-6"  encType='multipart/form-data' method='POST' action='http://localhost:27017/cargarproducto'>
            <label for="formControlInput" className="form-label">
              Titulo
            </label>
            <input
              type="text"
              className="form-control"
              id="formControlInput"
              placeholder="Titulo Producto"
              name='titulo'
              onChange={handleChange}
            />
          
            <label for="formControlInput" className="form-label">
              Precio
            </label>
            <input
              type="number"
              className="form-control"
              id="formControlInput"
              placeholder="Precio"
              name='precio'
              onChange={handleChange}
            />
 
            <label for="formControlInput" className="form-label">
              Link
            </label>
            <input
              type="text"
              className="form-control"
              id="formControlInput"
              placeholder="Link Mercado libre"
              name='link'
              onChange={handleChange}
            />

            <label htmlFor="formFile" className="form-label">
              Cargar imagen
            </label>
            <input className="form-control" type="file" id="formFile" name='imagen' onChange={handleChange} accept="image/*"/>
          <div className="form-floating">
            <label htmlFor="floatingTextarea">Descripcion del producto</label>
            <textarea
              className="form-control"
              placeholder="Leave a comment here"
              id="floatingTextarea"
              name='descripcion'
              onChange={handleChange}
            ></textarea>
          </div>
          <div className='mt-3 text-center'>
            <button type="submit" className="btn btn-success" onClick={()=>handleSubmit()}>Cargar Producto</button>
          </div>
        </form>
      </div>
    </

Asi es como se guarda en la base de datos, la que dice localhost es desde postam que es el cual esta bien, pero el que dice fakepath es cuando subo desde el frontend que es el que esta mal: introducir la descripción de la imagen aquí

1 respuesta 1

0

cuando trabajas con archivos, debes tomar en cuenta ciertas cosas:

  • No usas el value sino files al manejar un cambio en un input de tipo file
const handleFileChange = (e) => setForm({...form, [e.target.name]: e.target.files[0]})

Lo segundo es que para enviar el archivo, se le debe dar un procesamiento especial, en lugar de enviar solo texto, debes usar un FormData para incluir el archivo y debes cambiar el tipo de contenido (Content-Type) a uno que soporte archivos (multipart/form-data)

const data = new FormData();
data.append('file', file);
axios.post('http://localhost:27017/cargarproducto', data)

El código es solo un ejemplo, pero básicamente en lugar de enviar tu variable form, debes crear el FormData y usando append poner los valores que necesites: data.append(nombreCampo, valor)

2
  • ahh ya entendi, una consulta en caso para que me agarre los valores de texto podria poner setForm({...form, [e.target.name]:e.target.files[0] , [e.target.name]:e.target.value}), por que ahora puse e.target.files[0] y me funciona pero me deja pensando como hago para que tambien pueda escuchar los otros valores de texto de los input Commented el 9 feb. 2022 a las 1:23
  • Lo fácil es que tengas dos métodos una para inputs de tipo texto y otro para el input de tipo file Commented el 9 feb. 2022 a las 1:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.