Flask使用render_template无法显示错误页面（FilePond上传场景）

核心问题 #

FilePond 通过 AJAX 调用 /save 接口，它期望接收 JSON 格式的响应，而不是 HTML 模板。你当前返回 error.html 的方式不符合 FilePond 的交互逻辑，导致前端无法识别错误状态，进而出现无反应、页面卡住的情况。另外，文件循环处理逻辑也存在覆盖错误的问题。

步骤1：修正 Flask /save 接口 #

1. 仅保留 POST 方法（上传请求无需 GET）
2. 循环处理文件时，一旦遇到错误立即终止并返回 JSON 错误
3. 统一用 JSON 格式返回结果，符合 FilePond 的要求

from flask import jsonify

@app.route("/save", methods=['POST'])
def save():
    files = request.files.values()
    for photo in files:
        result = savePhoto(photo)
        # 只要有一个文件出错，立即返回错误
        if result != True:
            # 返回JSON格式错误，FilePond能识别
            return jsonify({"error": str(result)}), 400
    # 全部成功返回成功响应
    return jsonify({"success": True})

步骤2：优化 savePhoto 函数 #

统一返回逻辑，确保错误信息清晰，同时避免不必要的文件读取（直接用上传文件流读取内容，无需二次读取本地文件）：

def savePhoto(photo):
    try:
        ext = photo.filename.split('.')[-1]
        filename = create_photo_name() + '.' + ext
        fqdnFileName = os.path.join(parameters.STORING_FOLDER, filename)
        photo.save(fqdnFileName)
        
        # 直接读取上传文件的内容，无需二次读取本地文件
        fileContent = photo.stream.read()
        res = insertPhotoRepP(fileContent, ext)
        
        if res:
            return True
        # 数据库插入失败，返回明确错误
        return "Failed to insert photo into database"
         
    except Exception as e:
        logging.error(e)
        # 返回具体错误信息（生产环境可模糊处理）
        return f"Error saving photo: {str(e)}"

步骤3：配置 FilePond 错误处理 #

在前端添加错误钩子，接收后端返回的错误并提示用户：

<script>
  const inputElement = document.querySelector('input[type="file"]');
  FilePond.registerPlugin(FilePondPluginFileValidateSize)
  const pond = FilePond.create(inputElement, {
    maxFileSize:  '2MB',
    server: '/save',
    // 处理上传错误
    processError: (error) => {
      // 解析后端返回的错误信息
      if (error.body && error.body.error) {
        alert('上传失败：' + error.body.error);
      } else {
        alert('上传失败，请稍后重试');
      }
      // 返回true表示已处理错误
      return true;
    }
  });
</script>

额外说明 #

• 你提到 insertPhotoRepP 始终返回 False，需要先排查这个函数的逻辑，确保数据库插入逻辑正常，否则上传流程会一直触发错误分支。
• FilePond 会根据接口的 HTTP 状态码判断成功/失败，所以返回错误时要带上 4xx 状态码（比如示例中的 400）。

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