從Python（Flask）發送數據到Javascript？

Question

我正在嘗試在我的網站上實現拖放文件上傳器。 文件在被刪除后立即上傳，我想在預覽下彈出一個帶有燒瓶的URL。 我正在使用dropzone.js。 在dropzone的文檔中，提供了一個示例，作為從服務器發回數據以在文件上載后顯示的指南。 https://github.com/enyo/dropzone/wiki/FAQ#i-want-to-display-additional-information-after-a-file-uploaded

但是，當我嘗試在創建dropzone的Jinja模板中的內聯Javascript中使用url_for時，我回到了一個看起來像/％7Bfilename％7D的鏈接只是為了確保我在那里為URL彈出一個快速打印語句，它在控制台中顯得很好。

我在python中的上傳者：

def upload_file():
if request.method == 'POST': 
    file = request.files['file']
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        if is_image(file.filename): # generates a shortened UUID name for the image
            filename = shortuuid.uuid()[:7] + "." + file.filename.rsplit(".", 1)[1]
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

@app.route ('/<filename>')
def uploaded_image(filename): 
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

和我的index.html模板中的內聯JS：

<script>
var mydropzone = new Dropzone(document.body, {
    url: "{{url_for('upload_file')}}",
    previewsContainer: "#previews",
    clickable: "#clickable", 
     init: function() {
    this.on("success", function(file, responseText) {
        var responseText =  " {{ url_for('uploaded_image', filename='{filename}')}} "; 
        var span = document.createElement('span'); 
        span.setAttribute("style", "position: absolute; bottom: -50px; left: 3px; height: 28px; line-height: 28px;   ")
        span.innerHTML = responseText;
        file.previewTemplate.appendChild(span);

    });
}


});

我錯過了一些基本的東西嗎？ 我是否需要使用類似JSON / Ajax的東西（從來沒有使用過這些，但谷歌總是把它們搞定），因為URL是從服務器發回的數據？

Answer 1

只是：

1. 將文件路徑返回給客戶端：

    def upload_file(): if request.method == 'POST': # ... snip ... return url_for('uploaded_image', filename=filename) 

2. 刪除on('success')函數中的var responseText行，因為您將在響應中返回URL。

Answer 2

您非常接近它，但您必須通過JSON發送URL。

問題是，在URL實際可用之前，首次加載頁面時（在Jinja模板中）調用url_for('uploaded_image') 。 它認為你要求一個名為{filename}的文件的URL。

嘗試從POST請求中返回具有新URL的JSON響應：

return jsonify({'fileURL':url_for('uploaded_image', filename=filename)})

從那里，你可以用JS做任何你想做的事情。 你有什么應該工作，只需從responseText獲取URL。

編輯：固定回報。