Flask+前端QR码生成器无法生成二维码问题求助

核心问题点 #

1. 后端变量传递错误：返回模板时误将字符串'base64_img'传给data参数，而非实际生成的base64图片变量
2. 前端表单输入框初始name不匹配：输入框默认name为typetext，未切换选项时提交，后端无法获取输入内容
3. 空输入未处理：用户未输入内容就提交时，qrcode.make(data)会因data为None抛出异常
4. 前端初始渲染无效图片：首次加载页面时data不存在，图片标签显示损坏状态

具体修复步骤 #

1. 修复后端变量传递错误 #

修改后端genQR函数的返回语句：

# 错误写法
# return render_template('index.html', data='base64_img')

# 正确写法：传递实际变量
return render_template('index.html', data=base64_img)

2. 统一表单输入框的name处理（推荐方案） #

无需修改前端JS，后端直接读取输入框固定nametypetext，再结合type参数格式化数据：

@app.route('/', methods=['POST'])
def genQR():
    memory = BytesIO()
    type = request.form.get('type')
    raw_data = request.form.get('typetext', '').strip()
    
    # 处理空输入
    if not raw_data:
        return render_template('index.html', error="请输入内容")
    
    # 根据类型格式化数据
    match type:
        case "email":
            data = f"mailto:{raw_data}"
        case "phone":
            data = f"tel:{raw_data}"
        case "sms":
            data = f"sms:{raw_data}"
        case "wifi":
            # 假设输入格式：SSID,密码,加密类型（如WPA）
            parts = raw_data.split(',')
            data = f"WIFI:T:{parts[2]};S:{parts[0]};P:{parts[1]};;" if len(parts)>=3 else raw_data
        case _:
            data = raw_data
    
    size = int(request.form.get('size'))
    # 生成指定尺寸的二维码
    qr = qrcode.QRCode(
        version=1,
        error_correction=qrcode.constants.ERROR_CORRECT_L,
        box_size=10,
        border=4,
    )
    qr.add_data(data)
    qr.make(fit=True)
    img = qr.make_image(fill_color="black", back_color="white")
    img = img.resize((size, size))
    
    img.save(memory)
    memory.seek(0)
    base64_img = "data:image/png;base64,"+ b64encode(memory.getvalue()).decode('ascii')
    return render_template('index.html', data=base64_img)

3. 修复前端初始渲染问题 #

修改模板中的图片标签，添加条件判断：

<div id="qrcode" class="m-auto">
    {% if data %}
        <img src="{{data}}" alt="生成的二维码" class="max-w-full">
    {% else %}
        <p>请输入内容生成二维码</p>
    {% endif %}
</div>

4. 可选：简化前端JS逻辑 #

如果不需要动态修改输入框的type属性，可删除updateInputFields函数，直接保留输入框的text类型，减少不必要的DOM操作。

测试验证 #

1. 启动Flask应用，访问页面
2. 选择任意类型，输入对应内容，点击生成按钮
3. 检查二维码是否正常显示，扫描后是否能正确解析内容

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