js：尝试将fineuploader挂接到flask应用程序中

Question

我正试图把好的上传器挂到一个烧瓶的终点。在

端点看起来像：

@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' )

正在尝试替换标准表单：

^{pr2}$

使用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错误，并且端点似乎没有正确地管理request：

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.

并且应用程序会出现Upload failed错误。在

我猜当我在endpoint: '/'行中提交请求时，问题就发生了，我真的希望我不必完全重写端点的{{ do stuff }}部分。在

Answer 1

好吧，首先，你为你的端点列出的代码永远不会像Fine Uploader那样工作。端点必须返回有效的JSON响应。有关详细信息，请参见server-side examples和关联的readme。在

第二，就你的路线而言，有些东西看起来确实不对劲。您的服务器正在响应400。您需要检查服务器端代码，以确定拒绝请求的位置和原因。好的第一步是在Chrome的network选项卡中检查请求，记下端点，然后在服务器端代码的适当位置签入。在