本文介绍在 Flask 应用中，如何通过 URL 路径参数将文件名从 /archive 页面安全、清晰地传递至 /delete 路由，避免表单字段命名冲突与数据丢失问题，并结合 Jinja2 模板提升代码可维护性。
本文介绍在 flask 应用中，如何通过 url 路径参数将文件名从 `/archive` 页面安全、清晰地传递至 `/delete` 路由，避免表单字段命名冲突与数据丢失问题，并结合 jinja2 模板提升代码可维护性。
在 Flask 开发中，直接拼接 HTML 字符串（如 output += "...<form>..."</form>）不仅难以维护，还容易引发 XSS 风险和逻辑错误——尤其当需要动态绑定按钮与对应文件时，使用 <input name="idx" value="Delete"> 会导致所有按钮提交相同的 name，后端无法区分点击的是哪一个文件。
推荐方案是：放弃手动拼接 HTML，改用 Flask 内置的 Jinja2 模板引擎，并通过 Flask 的变量路由（/delete/<filename></filename>）直接将文件名作为路径参数传递。这种方式语义清晰、无需额外表单字段、天然支持 URL 编码，且能规避 request.form 取值失败的风险。
以下是优化后的完整实现：
from flask import Flask, redirect, render_template_string, url_for
import os
app = Flask(__name__)
@app.route('/archive')
def archive():
path = '/home/pi/Videos/'
try:
dir_list = sorted(os.listdir(path))
except FileNotFoundError:
dir_list = []
return render_template_string('''
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Video Archive</title></head>
<body>
<div class="box">
<div class="flex-box">
{% if dir_list %}
{% for file in dir_list %}
<div style="background: black; padding: 8px; margin: 4px 0; color: white;">
{{ file }}
<form method="post" action="{{ url_for('delete', filename=file) }}" style="display:inline;">
<button type="submit" class="btn" style="margin-left: 8px;">Delete</button>
</form>
</div>
{% endfor %}
{% else %}
<p>No videos found.</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5360" title="Skill Weave Chains — 技能链路由引擎"><img
src="https://img.php.cn/upload/skill/000/000/081/179047814579604.jpg" alt="Skill Weave Chains — 技能链路由引擎" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5360" title="Skill Weave Chains — 技能链路由引擎">Skill Weave Chains — 技能链路由引擎</a>
<p>开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。</p>
</div>
<a href="/xiazai/skill5360" title="Skill Weave Chains — 技能链路由引擎" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
{% endif %}
</div>
</div>
</body>
</html>
''', dir_list=dir_list)
@app.post('/delete/<path:filename>')
def delete(filename):
base_path = '/home/pi/Videos/'
full_path = os.path.join(base_path, filename)
# 安全校验：防止路径遍历攻击（如 filename="../../etc/passwd"）
if not os.path.abspath(full_path).startswith(os.path.abspath(base_path)):
return "Invalid file path", 400
try:
if os.path.exists(full_path):
os.remove(full_path)
else:
pass # 文件已不存在，静默处理或记录日志
except PermissionError:
return "Permission denied", 403
except Exception as e:
return f"Error deleting {filename}: {str(e)}", 500
return redirect(url_for('archive'))✅ 关键改进说明：
- 使用
@app.post('/delete/<filename>')</filename>接收文件名作为路径参数，<...></...><...></...> -
<button></button><input type="submit">
