Flask应用AJAX多文件上传失败：无法获取表单数据求助

我来帮你排查并解决这个问题，核心问题出在后端获取文件的方式上，同时还有几个细节需要调整：

1. 后端核心错误：文件输入的name匹配错误 #

你的Flask代码里用了request.files.getlist('upload-file')，但upload-file是表单的ID，不是文件输入框的name属性值。你的两个文件输入框的name分别是mRNA和lncRNA，这就导致后端根本找不到对应的数据。

修正后的后端代码 #

这里提供两种处理方式，适配不同的场景：

方式一：分别获取指定name的文件

适合你当前两个不同name的输入框场景：

@app.route('/ajax', methods=['POST'])
def ajax():
    # 分别获取两个文件
    mrna_file = request.files.get('mRNA')
    lncrna_file = request.files.get('lncRNA')
    
    # 处理mRNA文件
    if mrna_file and allowed_file(mrna_file.filename):
        filename = secure_filename(mrna_file.filename)
        # 注意：Case_ID需要提前定义（比如从表单或session获取），这里假设已完成赋值
        mrna_file.save(os.path.join(app.config['UPLOAD_FOLDER'], f"{Case_ID}{filename}"))
        # 建议用session存储文件名，避免全局变量的并发冲突
        session['filenames'] = session.get('filenames', []) + [filename]
    
    # 处理lncRNA文件
    if lncrna_file and allowed_file(lncrna_file.filename):
        filename = secure_filename(lncrna_file.filename)
        lncrna_file.save(os.path.join(app.config['UPLOAD_FOLDER'], f"{Case_ID}{filename}"))
        session['filenames'].append(filename)
    
    return jsonify({'status': 'success'})  # AJAX请求建议返回JSON，而非直接redirect

方式二：统一处理所有上传的文件

如果以后可能扩展更多文件输入，或者想统一处理，可以遍历request.files：

@app.route('/ajax', methods=['POST'])
def ajax():
    filenames = []
    for file_key in request.files:
        file = request.files[file_key]
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], f"{Case_ID}{filename}"))
            filenames.append(filename)
    session['filenames'] = filenames
    return jsonify({'status': 'success'})

2. 前端代码的小优化 #

你的FormData创建逻辑是正确的，new FormData($('#upload-file')[0])会自动收集表单里的所有文件，所以那段注释掉的手动append代码可以直接删掉。另外，AJAX请求成功后建议先判断返回状态再跳转，同时去掉async:false（同步请求会阻塞浏览器）：

$(function() {
    $('#upload-file-btn').click(function() {
        var form_data = new FormData($('#upload-file')[0]);
        $.ajax({
            type: 'POST',
            url: '/ajax',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if(data.status === 'success'){
                    window.location = "/result";
                }
            },
            error: function(){
                alert('上传失败，请重试');
            }
        });
    });
});

3. 其他需要注意的细节 #

• Case_ID的定义：你的代码里直接使用了Case_ID，但没有看到它的来源，需要确保这个变量已经正确赋值（比如从用户登录信息、表单隐藏域获取），否则会触发报错。
• 全局变量问题：不要用全局的filenames列表，多用户同时上传时会互相覆盖，建议用Flask的session存储用户的文件名列表（需要先设置SECRET_KEY）。
• allowed_file函数：确保这个验证文件后缀的函数已经正确实现，避免非法文件上传。

这样调整后，你的多文件上传应该就能正常工作了。

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