Как интегрировать Python API-запрос и ответ с JavaScript

Question

У меня есть набор API в server.py, а именно для загрузки файлов, предварительной обработки данных для аналитики и т. Д. Я хочу интегрировать и выполнять вызовы API через пользовательский интерфейс.Я не могу начать даже с загрузки файла, так как я не могу взаимодействовать с API через мой интерфейс.Пожалуйста, помогите мне понять, как интегрировать пользовательский интерфейс с API.

API возвращает выходные данные в файле JSON:

фрагмент кода server.py:

from flask import Flask, render_template, request
from flask_restplus import Resource, Api, fields, reqparse
import os
import pandas
import json
from werkzeug.contrib.fixers import ProxyFix
from waitress import serve
from werkzeug.datastructures import FileStorage
import parser
import uuid
import importlib
@app.route('/dashboard')
def dashboard():
return render_template('dashboard.html')
@api.route('/api/v1/fileupload')
class upload_file(Resource):
@api.expect(file_upload_model)
def post(self):
    try:
        requestid = uuid.uuid4().hex
        parser = reqparse.RequestParser()
        parser.add_argument('file', type=FileStorage, location='files', 
        required=True)
        args = parser.parse_args()
        # checking if the file is present or not.
        #if 'file' not in request.files:
        #    return "No file found"
        file = args.get('file')

        #file = request.files['file']

        path = os.path.join(os.path.join(server_path, requestid + "\\" + 
        "rawdata"))
        if os.path.exists(path):
            pass
        else:
            os.makedirs(path)

        abs_path = path + "\\" + file.filename
        file.save(abs_path)
        return {"requestid": requestid, "upload_status": "success", 
        "location": abs_path}, 200
        except Exception as e:
        requestid = None
        return {"requestid": requestid, "upload_status": "failed::" + str(e) 
        , "location": ""}

фрагмент кода для dashboard.html

<form class="navbar-brand" method="POST">
    <script type="text/javascript" language="javascript">
        function checkfile(sender) {
            var validExts = new Array(".csv");
            var fileExt = sender.value;
            fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
            if (validExts.indexOf(fileExt) < 0) {
                alert("Invalid file selected, please select only" +
                    validExts.toString() +"file");
                return false;
            }
            else return true;
        }
    </script>
    <div>Select a file to Upload: <br>
        <input type="file" name="fileupload"
               value="fileupload" id="fileupload" onchange=checkfile(this) /> <br>
        <small>please select .csv file only</small>
    </div>
</form>

Answer 1

Похоже, вам не хватает всей части, куда вы загружаете файл.Этот код должен вас туда доставить.

• Удалена ваша функция checkfile и использован атрибут accept
• Добавлен прослушиватель событий для отправки и отправки формы
• Предотвратить перенаправление страницы, вы можете решить, что отображать
• Div output покажет статус загрузки.

Решение

var form = document.forms.namedItem("upload-form");

form.addEventListener('submit', function(e) {
  var output = document.getElementById("output");
  var data = new FormData(this);
  var request = new XMLHttpRequest();

  request.open("POST", "/api/v1/fileupload", true);
  request.onload = function(e) {
    if (request.status == 200) {
      output.innerHTML = "Uploaded!";
    } else {
      output.innerHTML = "Error " + request.status + " occurred when trying to upload your file.<br \/>";
    }
  };

  request.send(data);
  e.preventDefault();
}, false);

<form class="navbar-brand" name="upload-form" enctype="multipart/form-data">
  <div>Select a file to Upload: <br>
      <input
        type="file"
        name="fileupload"
        id="fileupload"
        accept=".csv"
      /> <br>
      <small>please select .csv file only</small>
  </div>
  <button type="submit">Upload</button>
</form>
<div id="output"></div>