javascript - js : attempting to hook fine-uploader into a flask application

Question

我正在尝试将优秀的 uploader 挂接到 Flask 端点。

端点看起来像:

@app.route('/', methods=['GET', 'POST'])
def a_function():
    if request.method == 'POST':
         file = request.files['file']
         {{ do stuff }}
         return render_template('index.html', {{ variables }} )
    return render_template('index.html' )

我正在尝试替换标准表单:

<form action="" method=post enctype=multipart/form-data>
    <input type=file name=file>
    <input type=submit value=Upload>
</form>

与fine-uploader :

<div class="centered_div">
   <div id="manual-fine-uploader"> </div>
   <div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
       <i class="icon-upload icon-white"></i> Upload now>
   </div>
</div>

...

$(document).ready(function() {
    var manualuploader = $('#manual-fine-uploader').fineUploader({
        request: {
            endpoint: '/'
        },
        autoUpload: false,
        text: {
            uploadButton: '<i class="icon-plus icon-white"></i> Select Files'
        },
        failedUploadTextDisplay: {
            mode: 'custom',
            maxChars: 40,
            responseProperty: 'error',
            enableTooltip: true
        }
    });


    $('#triggerUpload').click(function() {
        manualuploader.fineUploader('uploadStoredFiles');
    });
});

但我在控制台中收到一些 js 错误，并且端点似乎没有正确管理请求:

POST http://{{ localhost }}:5000/ 400 (BAD REQUEST) jquery.fineuploader-3.4.1.js:3903 [FineUploader] Error when attempting to parse xhr response text (SyntaxError: Unexpected token <) jquery.fineuploader-3.4.1.js:155 [FineUploader] 'error' is not a valid property on the server response.

并且应用程序错误并显示上传失败。

我猜测当我在 endpoint: '/' 行中传递请求时会出现问题，并且我真的希望我不必完全重写 {{ do stuff }} 我的端点的一部分。

Answer 1

首先，您为端点列出的代码永远不会在 Fine Uploader 中按原样工作。您的端点必须返回有效的 JSON 响应。请参阅server-side examples以及相关的readme更多细节。

其次，就您的路由而言，似乎确实有些问题。您的服务器正在响应 400。您需要检查服务器端代码以确定请求被拒绝的位置以及原因。好的第一步是在 Chrome 的网络选项卡中检查请求，记下端点，然后检查服务器端代码中的适当位置。