Flask实现Bootstrap卡片绑定图片删除时无法匹配对应图片问题求助

问题根源 #

• 所有图片的删除控件都放在同一个<form>标签内，同一个表单下存在多个name="image_to_del"的隐藏字段，表单提交时浏览器默认只会传递第一个匹配的字段值，因此后端永远拿到第一张图片的文件名，导致每次都删除第一张。
• Flask端deleteImg路由函数定义了入参row，但路由规则未配置对应路径参数，实际请求时会触发参数不匹配报错。

修复方案（无需JS，改动最小） #

1. 调整HTML结构

把全局的大表单移除，给每个图片卡片单独绑定独立表单：

<div class="row">
    {% for row in pics %}
      <div class="col-md-3 mt-3">
        <!-- 每个卡片单独包裹form -->
        <form action="{{url_for('deleteImg')}}" method="POST">
          <div class="card">
              <img src="{{ url_for('static', filename='pics/'+row)}}" alt="{{row}}" class="card_img_top" height="200">
              <input type="hidden" name="image_to_del" class="image_to_del" value="{{row}}">
              <h5 class="text-cent" >Filename : {{row}}</h5>
          </div>
          <div class="card-footer text-center">
              <input type="submit" value="Delete" class="btn btn-success" />
          </div>
        </form>
      </div>
    {% endfor %}
</div>

2. 修复Flask路由代码

移除多余的函数入参，新增异常处理避免文件不存在时服务崩溃：

@app.route('/deleteImg', methods=['GET', 'POST'])
def deleteImg(): # 移除多余的row参数
    if request.method == 'POST':
        image_to_del = request.values.get('image_to_del', None)
        print(f'image_to_del:{image_to_del}')
        if image_to_del:
            file_path = os.path.join(UPLOAD_FOLDER, image_to_del)
            if os.path.exists(file_path): # 先判断文件存在再删除
                os.remove(file_path)
        return redirect('/uploadimg')
    return render_template('uploadimg.html')

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