es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo guardar una imagen enviada desde mi cliente NextJS en mi servidor NodeJS?

02 Aug, 2023 Programación

Hace algunas semanas estaba intentando subir una imagen a mi servidor NodeJS y, desde ahí, guardarla en un bucket de S3, pero estoy atascado en la primera parte y mi servidor no recibe la imagen. Estoy usando multer para guardarla en la carpeta public/.

Esto es lo que tengo en mi cliente:

const onSubmit = async (data: any) => {
        const image = data.file[0];
        const params: RequestInit = {
            method: 'POST',
            headers: {
                'Content-Type': `multipart/form-data`,
                'Accept': 'image/*'
            },
            body: JSON.stringify(data)
        };
        await fetch('/api/post/create-post', params);
        // Subir imagen al bucket de S3
        // Guardar publicación en la base de datos
    }

Estaba configurando un límite en el Content-Type con data=${JSON.stringify(data)}, y cuando registro los encabezados de mi solicitud antes de intentar guardar la imagen, no hay “boundary” y en su lugar recibo este error Error: Multipart: Boundary not found (este error se muestra en la consola de mi servidor).

Y esto es lo que tengo en mi servidor:

const upload = multer({
    dest: 'public/'
})

const router = express.Router();

router.post('/', (req, res, next) => {
    console.log(req.headers);
    next();
}, upload.single('photo'), (req, res) => {
    console.log(req.file);
    res.json({ success: true });
})

module.exports = router;
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema está en el encabezado Content-Type y en el parámetro de límite que no están configurados correctamente. Intenta configurar el encabezado Content-Type como multipart/form-data sin el parámetro de límite, y permite que multer configure automáticamente el límite.

    Además, asegúrate de que el nombre de tu entrada de archivo en el formulario coincida con el nombre pasado a upload.single() en el código del servidor, que actualmente está configurado como photo.

    Aquí tienes una versión actualizada del código del cliente:

    const onSubmit = async (data: any) => {
  const formData = new FormData();
  formData.append('photo', data.file[0]);
  formData.append('data', JSON.stringify(data));
  const params: RequestInit = {
    method: 'POST',
    body: formData
  };
  await fetch('/api/post/create-post', params);
  // Subir imagen al cubo S3
  // Guardar la publicación en la base de datos
};

    Y aquí tienes una versión actualizada del código del servidor:

    const upload = multer({
  dest: 'public/'
})

const router = express.Router();

router.post('/', upload.single('photo'), (req, res) => {
  console.log(req.file);

  res.json({ success: true });
})

module.exports = router;

    ¡Espero que esto ayude! Avísame si tienes alguna otra pregunta.

Comments are closed.