Flask网站文件存储异常排查：无法创建指定目录及解决方法

问题背景 #

我正在开发一个Flask网站，预期功能为：用户粘贴报告内容并输入报告名称后，将报告保存至static/{report_name}/input.txt，同时将Graphviz文件保存至static/{report_name}/graph.gv。但运行代码时无法创建指定报告目录（例如报告名为Emotet时，应创建static/reports/Emotet），Flask返回报错。

核心错误点 #

• 前端save_graph请求未传递报告名称：后端save_graph接口尝试从request.form获取reportname，但前端发送的是纯文本请求，未携带该参数，导致reportname为None，创建目录时路径无效。
• 多余的静态文件POST请求：前端直接向../static/reports/${reportname}/graph.gv发送POST请求，Flask默认不处理静态文件的写入请求，属于冗余操作。
• HTML标签语法错误：textarea标签存在多余逗号，且错误使用自闭合写法后又添加闭合标签，可能导致DOM解析异常，无法正确获取输入值。
• 事件监听重复绑定：每次调用summarize()函数都会给按钮添加新的点击监听，可能导致多次触发请求。

修正后的代码 #

前端代码 #

JavaScript

// 页面加载完成后绑定监听，避免重复触发
document.addEventListener('DOMContentLoaded', function() {
  const summarizeButton = document.getElementById("summarize");
  
  summarizeButton.addEventListener("click", async() => {
    // 获取用户输入并去除首尾空格
    const text = document.getElementById("paragraph").value.trim();
    const reportname = document.getElementById("reportname").value.trim();
    const graph = document.getElementById("selGraph").value.trim();

    // 校验输入完整性
    if (!text || !reportname || !graph) {
      alert("请填写完整内容");
      return;
    }

    // 发送请求保存输入文本
    await fetch("../save_input", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ text, reportname }),
    });

    // 发送请求保存Graphviz文件，携带报告名称
    await fetch("../save_graph", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ graphContent: graph, reportname }),
    });

    // 切换到Step2页面
    document.getElementById("Step2").click();
  });
});

HTML

<p>请将报告内容粘贴至下方输入框：</p>
<br>
<textarea id="paragraph" aria-labelledby="TextforReport"></textarea>
<br>
<p>请输入报告名称：</p>
<br>
<textarea id="reportname" aria-labelledby="Textforname"></textarea>
<br>
<button id="summarize">生成报告</button>

Flask后端代码 #

from flask import Flask, request, jsonify
import os

app = Flask(__name__)

@app.route('/save_input', methods=['POST'])
def save_input():
    try:
        data = request.get_json()
        # 校验参数是否完整
        if not data or 'text' not in data or 'reportname' not in data:
            return jsonify({"error": "缺少必要参数"}), 400
        
        paragraph = data.get('text')
        reportname = data.get('reportname')
        
        # 用os.path.join拼接路径，兼容跨平台
        report_dir = os.path.join('static', 'reports', reportname)
        # exist_ok=True避免目录已存在时抛出异常
        os.makedirs(report_dir, exist_ok=True)
        
        input_path = os.path.join(report_dir, 'input.txt')
        with open(input_path, 'w', encoding='utf-8') as file:
            file.write(paragraph)
        
        return jsonify({"message": "输入文本保存成功"}), 200
    except Exception as e:
        return jsonify({"error": str(e)}), 500

@app.route('/save_graph', methods=['POST'])
def save_graph():
    try:
        data = request.get_json()
        if not data or 'graphContent' not in data or 'reportname' not in data:
            return jsonify({"error": "缺少必要参数"}), 400
        
        graph_content = data.get('graphContent')
        reportname = data.get('reportname')
        
        report_dir = os.path.join('static', 'reports', reportname)
        os.makedirs(report_dir, exist_ok=True)
        
        graph_path = os.path.join(report_dir, 'graph.gv')
        with open(graph_path, 'w', encoding='utf-8') as file:
            file.write(graph_content)
        
        return jsonify({"message": "Graphviz文件保存成功"}), 200
    except Exception as e:
        return jsonify({"error": str(e)}), 500

if __name__ == '__main__':
    app.run(debug=True)

关键修复说明 #

1. 统一参数传递格式：save_graph接口改为接收JSON格式数据，同时传递Graphviz内容和报告名称，确保后端能正确获取路径信息。
2. 路径安全处理：使用os.path.join替代字符串拼接，避免跨平台路径分隔符问题；添加exist_ok=True防止目录已存在时报错。
3. 输入校验：前端和后端都添加参数校验，避免空值或缺失参数导致的错误。
4. 异常捕获：后端添加try-except块，返回具体错误信息，便于调试。
5. 修复HTML语法：修正textarea标签的错误写法，确保能正确读取用户输入。
6. 优化事件绑定：在页面加载完成后仅绑定一次点击事件，避免重复触发请求。

内容的提问来源于stack exchange，提问作者Hoang Cuong Nguyen