上传到 Flask 应用程序后，Dropzone 不会重定向答案

【问题标题】：Dropzone doesn't redirect after upload to Flask app上传到 Flask 应用程序后，Dropzone 不会重定向
【发布时间】：2016-07-27 19:08:44
【问题描述】：

我正在编写一个资源来使用 Dropzone 将文件上传到 Flask 应用程序。上传文件后，应用程序应重定向到 hello world 页面。这没有发生，应用程序卡在上传文件的视图上。我正在使用来自 master 的 jQuery 3.1.0 和 Dropzone。

from flask import Flask, request, flash, redirect, url_for render_template)
from validator import Validator

ALLOWED_EXTENSIONS = set(['csv', 'xlsx', 'xls'])

def allowed_file(filename):
    return (filename != '') and ('.' in filename) and \
           (filename.split('.')[-1] in ALLOWED_EXTENSIONS)

def create_app():
    app = Flask(__name__)
    app.secret_key = 'super secret key'
    return app

app = create_app()

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/world')
def hello_world():
    return render_template('hello_world.html')

@app.route('/upload', methods=['POST'])
def upload():
    # check that a file with valid name was uploaded
    if 'file' not in request.files:
        flash('No file part')
        return redirect(request.url)
    file = request.files['file']
    if not allowed_file(file.filename):
        flash('No selected file')
        return redirect(request.url)

    # import ipdb; ipdb.set_trace()
    validator = Validator(file)
    validated = validator.validate()
    if validated:
        flash('Success')
    else:
        flash('Invalid file')
    return redirect(url_for('hello_world'))

if __name__ == '__main__':
    app.run(debug=True)

{% extends "base.html" %}

{% block head %}
    <link href="/static/css/dropzone.css" rel="stylesheet">
    <script src="/static/js/dropzone.js"></script>
{% endblock %}
{% block body %}
    <main>
        <section>
            <div id="dropzone">
                <form action="upload" method="post" class="dropzone dz-clickable" id="demo-upload" multiple>
                    <div class="dz-message">
                        Drop files here or click to upload.
                    </div>
                </form>
            </div>
        </section>
    </main>
{% endblock %}

【问题讨论】：

查看我的解决方案here！

标签： javascript python flask dropzone.js

【解决方案1】：

我在我的烧瓶应用程序中遇到了类似的问题，我用以下 jQuery 函数解决了它：

Dropzone.options.myDropzone = {

autoProcessQueue: false,

init: function() {
    var submitButton = document.querySelector("#upload-button");
    myDropzone = this;

    submitButton.addEventListener("click", function() {
        myDropzone.processQueue();
    });

    this.on("sending", function() {
        $("#myDropzone").submit()
    });
  }
};

在发送文件之前调用参数“sending”，以便我可以提交我的 dropzone 表单。有了这个，我的烧瓶应用程序中的所有重定向都可以正常工作。

为了清楚起见，我的 html 代码片段：

<form action="/" method="POST" class="dropzone" id="myDropzone" enctype="multipart/form-data">

</form>

【讨论】：

如果要刷成功上传消息怎么办？

【解决方案2】：

我对 dropzone 不太熟悉，但我将举一个我的烧瓶应用程序中的一个示例，该应用程序使用文件上传。我只是使用标准的 HTML 上传表单。希望从这里您应该能够了解正在发生的事情。

注意，我没有使用模板上传文件。

def index():
    return """<center><body bgcolor="#FACC2E">
    <font face="verdana" color="black">
    <title>TDX Report</title>
    <form action="/upload" method=post enctype=multipart/form-data>
    <p><input type=file name=file>
    <input type=submit value=Upload>
    </form></center></body>"""

# here is my function that deals with the file that was just uploaded
@app.route('/upload', methods = ['GET', 'POST'])
def upload():
    if request.method == 'POST':
        f = request.files['file']
        f.save(f.filename)
        # process is the function that i'm sending the file to, which in this case is a .xlsx file
        return process(f.filename)

这一行是我为发布文件上传设置路由路径的地方：

<form action="/upload" method=post enctype=multipart/form-data>

您的问题可能是这一行： <form action="upload" method="post" class="dropzone dz-clickable" id="demo-upload" multiple> 在upload 之前缺少/。

【讨论】：