Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

302
Vistas
¿Cómo enviar un archivo de imagen usando datos de formulario a la API de React NextJS?

Estoy tratando de enviar a FastAPI usando la API NextJS.

 const file = e.target.files[0]; const formData = new FormData(); formData.append("file", file); fetchClient(hendlerData, { "Content-Type": "multipart/form-data" }).post(formData);

Si está en la API de NextJS

 async function hendler(req: NextApiRequest, res: NextApiResponse<SessionUser>) { if(req.method === "POST"){ const response = fetch(endPoint, { method: "POST", headers: { "Content-Type": req.headers["content-type"] }, body: req.body, }); }

}

Luego, el archivo se guarda a través de FastAPI en el formato application/octet-stream. Si lo carga después de eso, será algo como esto.

 HEADERS server: [ 'nginx/1.18.0 (Ubuntu)' ], date: [ '' ], 'content-type': [ 'application/octet-stream' ], 'content-length': [ '92556' ], connection: [ 'keep-alive' ], 'content-disposition': [ 'inline; filename="photo.bin"' ]

Si usa formidable

 import { IncomingForm } from "formidable"; export const config = { api: { bodyParser: false, }, }; .... async function hendler(req, res: NextApiResponse) { const data: any = await new Promise((resolve, reject) => { const form = new IncomingForm(); form.parse(req, (err, fields, files) => { if (err) return reject(err); resolve({ fields, files }); }); }); // console.log(data) fields: {}, files: file: PersistentFile _events: [Object: null prototype], _eventsCount: 1, _maxListeners: undefined, lastModifiedDate: #########, filepath:'/var/folders/qx/....', newFilename: '15c946ac557fb54e369e94f00', originalFilename: ###########, mimetype: 'image/jpeg', hashAlgorithm: false, size: 51374, _writeStream: [WriteStream], hash: null, const response = fetch(endPoint, { method: "POST", headers: { "Content-Type": req.headers["content-type"] }, body: ??????, // req.body undefined }); }

}

 ...

¿Qué enviar al cuerpo?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda