如何修改Flask代码实现Firestore图片的上传与前端展示？

可以通过修改现有代码实现该需求，以下是具体修改方案：

一、后端路由修改 #

调整原代码以处理文件上传，将图片转换为Base64编码后存储到Firestore的image字段：

@blueprint.route("/employer_settings", methods=["GET", "POST"])
@login_required
def employer_settings():
    error_message = None
    employer_data = {}

    try:
        employer_uid = session.get("user", {}).get("uid")
        employer_ref = db.collection("Company").document(employer_uid)
        employer_settings = employer_ref.get().to_dict()

        # 加载现有企业数据
        if employer_settings:
            employer_data = employer_settings

        if request.method == "POST":
            # 获取表单文本数据
            name = request.form.get("name")
            phone = request.form.get("phone")
            
            # 初始化更新数据字典
            update_data = {
                "first_name": name,
                "phone": phone,
            }
            
            # 处理图片上传
            if "company_image" in request.files:
                image_file = request.files["company_image"]
                if image_file.filename != "":
                    # 将图片转为Base64编码（适合小图片，大图片建议用Cloud Storage存URL）
                    import base64
                    image_data = base64.b64encode(image_file.read()).decode("utf-8")
                    update_data["image"] = image_data

            # 更新Firestore文档
            employer_ref.update(update_data)

            # 更新本地数据字典，同步前端展示
            employer_data["first_name"] = name
            employer_data["phone"] = phone
            if "image" in update_data:
                employer_data["image"] = update_data["image"]

    except Exception as e:
        error_message = str(e)
        print("Error retrieving data:", e)

    return render_template(
        "employer_settings.html",
        employer_data=employer_data,
        error_message=error_message,
    )

后端修改说明 #

• 新增文件上传逻辑，检测表单中的company_image字段
• 使用Base64编码存储图片数据到Firestore的image字段（注意：Firestore单文档最大1MB，若图片超过该大小，建议改用Firebase Cloud Storage存储图片，将图片URL存入image字段）

二、前端HTML修改 #

修改表单支持文件上传，并添加图片展示区域：

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8" />
    <title>Ustawienia firmy</title>
    <script src="/static/script/search_script.js" defer></script>
</head>
<body>
    <a href="/employer_main_page"
    ><img
      src="/static/img/logo.PNG"
      alt="logo"
      class="company-logo"
      width="80"
      height="80" /></a
    ><br />
    <form id="searchForm">
        <label for="global_search_query">Wyszukaj pracowników:</label>
        <input type="text" id="global_search_query" name="query" required />
    </form>
    <br />
    <!-- Wyświetl wyniki na bieżącej stronie -->
    <div id="searchResults"></div>
    <br />
    <br />

    {# Wyświetlanie błędu #} {% if error_message %}
        <p style="color: red">{{ error_message }}</p>
    {% endif %}

    <h1>Dane osobowe firmy</h1>

    {# 展示现有企业图片 #}
    {% if employer_data.get('image') %}
        <div style="margin: 10px 0;">
            <label>Obecne logo firmy:</label><br>
            <img src="data:image/jpeg;base64,{{ employer_data['image'] }}" alt="Logo firmy" width="150" height="150">
        </div>
    {% endif %}

    {# Formularz do aktualizacji danych zespołu #}
    <form method="post" enctype="multipart/form-data">
        <label for="name">Nazwa firmy:</label>
        <input
          type="text"
          id="name"
          name="name"
          value="{{ employer_data['first_name'] }}"
        /><br /><br />

        <label for="phone">Numer telefonu:</label>
        <input
          type="text"
          id="phone"
          name="phone"
          value="{{ employer_data['phone'] }}"
        /><br /><br />

        <label for="company_image">Zmień logo firmy:</label>
        <input type="file" id="company_image" name="company_image" accept="image/*"><br /><br />

        <input type="submit" value="Zapisz zmiany" />
    </form>

    <br />
    <form method="post" action="{{ url_for('web_routes.delete_account_employer') }}">
        <input type="submit" value="Usuń konto" style="background-color: red; color: white;" />
    </form>

    <a href="{{ url_for('web_routes.employer_main_page') }}"
    >< Powrót na stronę główną</a
      >
    </body>
</html>

前端修改说明 #

• 表单添加enctype="multipart/form-data"属性，这是处理文件上传的必要配置
• 新增文件上传输入框，限制仅接受图片类型
• 添加图片展示区域，通过Base64数据直接渲染图片

关键注意事项 #

• 文档大小限制：Firestore单文档最大支持1MB，若图片超过该大小，建议使用Firebase Cloud Storage存储图片，将图片的公共URL存入image字段，前端直接通过URL加载
• 格式兼容：上述代码默认使用JPEG格式前缀，若支持PNG等其他格式，需调整前端展示的src前缀（如data:image/png;base64,）
• 增强验证：可额外添加文件大小、格式的前端/后端验证，避免无效文件上传

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