Python/Flask - 显示来自文件输入的图像

Question

简单明了，我的目标是让用户输入他们的名字，然后从文件输入中选择一个图像。在我上一个问题的一些帮助下，我能够将名称转移到下一页，但我无法显示选定的图像。

现在，填写后会提供名称和图像文件名。希望得到图片文件，真正显示图片。

主页...

显示页面...

这是我当前的代码:

主页.html

{% extends 'base.html' %}
{% block head %}
<title>Home Page</title>
{% endblock %}
{% block body %}

  <div class="content-container">
    <form action="{{ url_for('result') }}" method="post">
      <h2>Input your name:</h2>
      <input type="text" class="user-input user mb-3" name="user">
      <h2>Select your image:</h2>
      <input type="file" accept="image/*" class="form-control-file"
             id="formControlFile1" name="image">
      <input class="btn btn-outline-primary" type="submit" value="Submit">
    </form>
  </div>

{% endblock %}

结果.html

{% extends 'base.html' %}
{% block head %}
<title>Result Page</title>
{% endblock %}
{% block body %}

  <div class="content-container">
    <h2>{{ name }}</h2>
    <h2>{{ image }}</h2>
  </div>

{% endblock %}

主要.py

from flask import Flask, render_template, request, url_for, redirect

app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        user = request.form["user"]
        image = request.form["image"]
        return redirect(url_for('result', name=user, image=image))
    return render_template('home.html')


@app.route("/result", methods=['GET', 'POST'])
def result():
    name = request.form.get('user')
    image = request.form.get('image')
    return render_template("result.html", name=name, image=image)


if __name__ == "__main__":
    app.run()

所以，是的，希望我解释得足够简单。用户输入名字，选择图片，目标是在结果页面显示名字和图片。感谢任何可以为这个卑微的灵魂提供指导的人。

Answer 1

你可以试试这样的东西

1. 你的表单的 enctype 应该是 multipart/form-data

{% extends 'base.html' %}
{% block head %}
<title>Home Page</title>
{% endblock %}
{% block body %}

  <div class="content-container">
    <form action="{{ url_for('result') }}" method="post" enctype="multipart/form-data">
      <h2>Input your name:</h2>
      <input type="text" class="user-input user mb-3" name="user">
      <h2>Select your image:</h2>
      <input type="file" accept="image/*" class="form-control-file"
             id="formControlFile1" name="image">
      <input class="btn btn-outline-primary" type="submit" value="Submit">
    </form>
  </div>

{% endblock %}

1. 你需要使用request.files并在base64中解码

import base64
from flask import Flask, render_template, request, url_for, redirect

app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        user = request.form["user"]
        image = request.files['image']  # get file
        image_b64 = base64.b64encode(image.read()).decode('utf-8')
        return redirect(url_for('result', name=user, image_b64=image_b64))
    return render_template('home.html')


@app.route("/result", methods=['GET', 'POST'])
def result():
    name = request.form.get('user')
    image_b64 = request.form.get('image_b64')
    return render_template("result.html", name=name, image_b64=image_b64)


if __name__ == "__main__":
    app.run()

1. 您应该更改 HTML 以从 base64 转换图像

{% extends 'base.html' %}
{% block head %}
<title>Result Page</title>
{% endblock %}
{% block body %}

  <div class="content-container">
    <h2>{{ name }}</h2>
    <img src="data:image/png;base64, {{ image_b64 }}">
  </div>

{% endblock %}