Question

我有一个简单的一页Flask应用程序，该应用程序在页面顶部（通过Flask-Dropzone）具有Dropzone.js拖放区，并在下面的表格中呈现了所有先前上传文件的预览。到目前为止，用户必须在上传后重新加载页面，才能更新下面的表格。我知道我可以将页面设置为在自动上传后重新加载并重新呈现模板，但是我希望在处理完每个文件后异步更新表（例如，如果用户一次上传5个文件并且正在处理它们并行地，如果页面在页面上重新加载了5次，那会有点糟。

这是我的准系统代码。

app.py

# app.py
app = Flask(__name__, template_folder = "./templates", static_folder="/")

"""
Uploader
"""
# dropzone for uploader
dropzone = Dropzone(app)
app.config["DROPZONE_MAX_FILE_SIZE"] = 1000 # max file size for now is 1 gb
app.config['DROPZONE_ALLOWED_FILE_TYPE'] = 'image/*' # only images

@app.route("/", methods=["GET", "POST"])
def home():
    # get all of users files
    files = get_files()

    return render_template("index.html", files = files)

@app.route("/update_table", methods=["GET"])
def update_table():
    # IDEALLY this would return either the updated table or the updated entry

@app.route("/upload", methods=["POST"])
def upload():
    if request.method == 'POST':
        #save file locally 
    return render_template("index.html")

if __name__ == "__main__":
    app.run(port=8008, debug=True)

index.html

<head>
  {{ dropzone.load_css() }}
  {{ dropzone.style('border: 2px solid blue; background-color: blue; margin: 0') }}
</head>
<body>
  {{ dropzone.create(action='upload') }}

  <table id="user_files">
    <!-- THIS TABLE SHOULD UPDATE ON EACH DROPZONE UPLOAD -->
    {% for file in files %}
    <tr>
      <td>{{file[0]}}</td>
      <td>{{file[1]}}</td>
    </tr>
    {% endfor %}
  </table>

  {{ dropzone.load_js() }}
  {{ dropzone.config() }}
</body>

我认为解决方案是对Flask-Dropzone配置进行某种形式的Ajax修改，我只是Ajax的新手，因此很抱歉没有提前提供更多内容。

Answer 1

您可以将Websocket与Flask一起使用： https://flask-socketio.readthedocs.io/en/latest/

文件上传后，您可以使用emit（）/ send（）从python一侧更新网页。

您将需要一些javascript代码，将新的附加到“ user_files”表中。也许这个例子可以达到目的： https://www.w3schools.com/jsref/met_table_insertrow.asp

烧瓶拖放区上传后异步更新页面内容

1 个答案: