Node.js：尝试将 Fine-uploader 挂接到烧瓶应用程序中

Question

我正在尝试将精细上传器挂接到 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 错误，并且端点似乎没有正确管理 request：

POST http://{{ localhost }}:5000/ 400（错误请求） jquery.fineuploader-3.4.1.js:3903 [FineUploader] 尝试时出错 解析 xhr 响应文本 (SyntaxError: Unexpected token

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

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

Answer 1

好吧，首先，您为端点列出的代码将永远无法与 Fine Uploader 一起使用。您的端点必须返回有效的 JSON 响应。请参阅server-side examples 和相关的readme 了解更多详情。

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