Estoy tratando de crear un sitio web simple para ejecutar una red neuronal en una imagen. El frontend está en VUE.js y el backend en Python Flass. Puedo pasar los datos que quiero como identificación y precisión en el encabezado, sin embargo, el archivo no se "carga" en el servidor del matraz. ¿Alguna idea de cómo debería estar haciendo esto?
Este es mi método en javascript:
async predictUF(img) { //let config = {header : {'Content-Type' : 'image/png'}} const response = await fetch("http://localhost:5000/process_img", { method: 'POST', headers: {'id': '123', 'precision': '75'}, files: img, mode: 'cors', cache: 'default' }); const recv = await response.json(); console.log(recv); },Y este es mi código de servidor de matraz:
@app.route('/process_img', methods=['POST', 'GET']) @cross_origin() def process_image(): if request.method == 'POST': filenames = [] payload = request.headers id = payload['id'] precision = payload['precision'] files = request.files.to_dict(flat=False) for file_list in files.values(): for file in file_list: name = secure_filename(file.filename) path = save_image(file, name) filenames.append(path) results, img_paths = run_process(filenames) encoded_imgs = [encode_image(p) for p in img_paths] return jsonify({'msg': 'success', 'results': [results], 'images': encoded_imgs}) else: return 'Methods restricted'Tenía un script de python para probar la API que funcionó perfectamente, era algo como esto (ignoré las codificaciones base64 a propósito para simplificar el problema):
r = requests.post(url, files=files, data=payload)¿Hay alguna forma de llenar los archivos en la API de recuperación de javascript o me estoy equivocando?
Gracias a Ibsn lo hice funcionar.
Para que el matraz acepte request.files: se debe usar un formulario HTML con enctype=multipart/form-data. (¿Cómo subo un archivo con JS fetch API? )
Afortunadamente, JavaScript FormData() usa el mismo formato que usaría un formulario si el tipo de codificación se configurara en "multipart/form-data". Así que mi versión de trabajo final de js es esta. ( Obtener los datos recibidos en una solicitud Flask )
async predictUF(img) { var data = new FormData(); data.append('files', img, img.name); const response = await fetch("http://localhost:5000/process_img", { method: 'POST', headers: {'id': '123', 'precision': '75'}, body: data, mode: 'cors', cache: 'default' }); const recv = await response.json(); console.log(recv); },