如何在jquery.filer中获取文件并上传至Flask后端？

嘿，我来帮你搞定这个上传文件的问题！你现在遇到的核心问题是前端jquery.filer的上传字段名和后端Flask的接收键不匹配，再加上一些小配置细节需要调整，下面分步骤来解决：

1. 先搞定后端的接收键名 #

jquery.filer默认会把上传的文件用files[]作为字段名（毕竟它支持多文件上传），但你的Flask代码里写的是request.files['file']，这就导致后端找不到对应的文件啦。有两种解决方式：

方式一：修改Flask后端代码 #

如果你需要支持多文件上传，或者不想改前端，直接把后端代码改成这样：

from flask import Blueprint, request, jsonify

@mod.route('/api/files/register-persons', methods=['POST'])
def registerPersons():
    # 获取上传的文件（如果是单文件，取第一个即可）
    uploaded_file = request.files.get('files[]')
    if uploaded_file:
        # 这里可以添加文件保存逻辑，比如：
        # uploaded_file.save(f"./uploads/{uploaded_file.filename}")
        return jsonify({"status": "success", "filename": uploaded_file.filename})
    return jsonify({"status": "error", "message": "没有上传任何文件"})

要是你确定只传单个文件，也可以用next(iter(request.files.values()), None)来快速获取第一个文件。

方式二：修改前端jquery.filer的字段名 #

如果你想让后端用file这个键来接收，就在uploadFile配置里加个filesName参数，指定字段名：

uploadFile: {
    url: "/api/files/register-persons",
    data: {},
    type: 'POST',
    enctype: 'multipart/form-data',
    filesName: 'file', // 新增这行，把文件字段名改成file
    beforeSend: function(itemEl, file){ 
        console.log(itemEl, file) 
    },
    success: function(data, el){ 
        var parent = el.find(".jFiler-jProgressBar").parent();
        el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
            $("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
        });
    },
    error: function(el){ 
        var parent = el.find(".jFiler-jProgressBar").parent();
        el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
            $("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
        });
    }
}

改完之后，后端用request.files['file']就能正常拿到文件了。

2. 确保jquery.filer正确构建FormData #

你已经设置了enctype: 'multipart/form-data'，这很好，这是文件上传的必要配置。另外注意不要手动在data里加文件，jquery.filer会自动把文件添加到FormData里，保持data: {}就没问题。

3. 调试小技巧 #

如果还是有问题，建议在Flask后端加两行打印代码，看看前端实际传了什么：

@mod.route('/api/files/register-persons', methods=['POST'])
def registerPersons():
    print("所有上传的文件字段:", request.files.keys())
    print("请求的内容类型:", request.content_type)
    return jsonify({"received_fields": list(request.files.keys())})

这样你就能清楚看到前端发过来的字段名到底是什么，再对应调整后端或者前端的配置就行。

内容的提问来源于stack exchange，提问作者danywigglebutt