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

141
Views
Cómo enviar una imagen desde el front-end ajax a Flask Restful api

Creé una API usando Flask Restful en la que el usuario puede enviar una imagen de piedra preciosa y, a cambio, recibirá un JSON con predicción de nombre de imagen.
Mi código de matraz está abajo

 class Predict(Resource): def get(self): image = request.files['image'] image.save(os.path.join(app.config["IMAGE_UPLOADS"], image.filename)) file_path = app.config['IMAGE_UPLOADS'] + "/" + image.filename prediction = {"pred": predict(file_path)} return jsonify(prediction) api.add_resource(Predict, '/image')

predict es la función que toma la ruta de la imagen guardada localmente en el servidor.
cuando uso para probar la API desde el código python, es decir

 from requests import get url = "http://127.0.0.1:5000/image" img = open('./static/uploads/img.PNG', 'rb') my_img = {'image': img} pred = get(url, files=my_img) print(pred.text)

funciona bien y sé que en el código python la imagen es un objeto de tipo BufferedReader.
ahora quiero aceptar el archivo del formulario web usando ajax y formData. Cuando envío el formulario, devuelve 400 Bad Request
La función Ajax que usé en mi código.

 <form id="myform"> <input type="file" name="image" id="image"> <input type="submit" value="Submit"> </form> <script src="../static/js/ajax.js"></script> <script> let form = document.querySelector("#myform"); form.addEventListener("submit", e => { e.preventDefault(); formdata = new FormData(form); ajax({ url: "http://127.0.0.1:3000/image", method: "GET", data: formdata, onsuccess: (responseText, status, statusText)=>{ console.log(responseText); console.log(status); console.log(statusText); }, onfailure: (status, statusText)=>{ console.log(status); console.log(statusText); }, contentType: false, }); }) </script>
about 4 years ago · Juan Pablo Isaza
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!