Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

1K
Views
¿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?

over 4 years ago · Santiago Trujillo
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!