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

简单地：

将文件路径返回给客户端：

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

删除var responseText功能中的on('success')行，因为您将在回复中获取该网址。

Answer 2

您非常接近它，但您必须通过JSON发送URL。

问题是，在网页首次加载（在Jinja模板中）之前，您可以在URL实际可用之前调用url_for('uploaded_image')。它正在考虑您要求提供名为{filename}的文件的网址。

尝试从POST请求中返回一个JSON响应，其中包含新的URL：

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

从那里，你可以用JS做任何你想做的事情。你有什么应该工作，只需从responseText获取URL。

编辑：修正了返回。

从Python（Flask）发送数据到Javascript？

2 个答案: