Flask-Dropzone 上传后异步更新页面内容答案

【问题标题】：Asynchronously Update Page Content after Flask-Dropzone UploadFlask-Dropzone 上传后异步更新页面内容
【发布时间】：2020-11-15 00:35:14
【问题描述】：

我有一个简单的单页 Flask 应用程序，它在页面顶部有一个 Dropzone.js 拖放区（通过 Flask-Dropzone），并在下面的表格中呈现所有以前上传的文件的预览。截至目前，用户必须在上传后重新加载页面才能更新下面的表格。我知道我可以将页面设置为在上传后自动重新加载并重新渲染模板，但我希望在处理每个文件后异步更新表格（例如，如果用户一次上传 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 新手，因此很抱歉没有提前提供更多信息。

【问题讨论】：

标签： python flask dropzone.js

【解决方案1】：

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

文件上传后，可以使用emit()/send()从python端更新网页。

您将需要一些 javascript 代码来将新的

附加到“user_files”表中。也许这个例子可以解决问题： https://www.w3schools.com/jsref/met_table_insertrow.asp

【讨论】：