如何要求用户将图像上传到 html 页面，使用烧瓶将此图像插入到 sqlite3 表中，然后使用 jinja 显示此图像？

Question

到目前为止，这就是我想出的

#html 要求用户输入包括图片在内的信息

    <div class="form-group">
        <input autocomplete="off" autofocus class="form-control" name="name" placeholder="name" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" name="subject" placeholder="subject" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" name="experience" placeholder="experience" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" name="phone" placeholder="puone-number" type="number">
    </div>
    <div class="form-group">
        <input type="file" name="pic" id="pic">
    </div>
    <button class="btn btn-primary" type="submit">Register</button>
</form>

烧瓶

@app.route("/register", methods=["GET", "POST"])
def register():
    """Show teacher registering menu"""
    if request.method == "GET":
        return render_template("register.html")

    else:
        # get the user input
        name = request.form.get("name")
        sub = request.form.get("subject")
        exp = request.form.get("experience")
        phone = request.form.get("phone")
        
        f = request.files['pic']
        pic = f.save(secure_filename(f.filename))
        
        if not name or not sub or not exp or not phone:
            return "404"
        # insert in the database
        sql = "INSERT INTO teachers (name, sub, exp, phone, pic) VALUES (?, ?, ?, ?, ?)"
        db.execute(sql, name, sub, exp, phone, pic)
        # inform the user for the success of the process
        return render_template("success.html")

在 html 上显示结果

<div>
{% for i in query %} 
   
    <div class="media bg-primary text-white">
      <img class="align-self-end mr-3" src={{ i['pic'] }} alt="Generic placeholder image">
      <div class="media-body">
        <h5 class="mt-0">Mr. {{ i['name'] }}</h5>
        <ul class="list-group list-group-flush text-dark">
          <li class="list-group-item">subject: {{ i['sub'] }},</li>
          <li class="list-group-item">experience: {{ i['exp'] }},</li>
          <li class="list-group-item">Contact number: {{ i['phone'] }}</li>
        </ul>
      </div>
    </div>
    <br>
{% endfor %}
</div>

但是现在每次我尝试它时，我都会发现我的 sql 表中 image 列的值为 NULL。 我该如何解决这个问题

Answer 1

pic = f.save(secure_filename(f.filename))

save 方法返回None，所以这里的pic 将是None。

我认为您打算将其文件名写入数据库，因此也许将其更改为：

pic = secure_filename(f.filename)
f.save(pic)

现在pic 是您服务器上的文件名，因此您只需在查看文件的任何位置重建它。

当然要注意，这使用了用户上传的文件的文件名。您可能希望避免这种情况，以防重复或只是为了清洁。见this other answer我写的关于那个。

编辑：关于您的模板。

在模板中加载图片时，假设文件名是image.jpg，并且您使用现有代码：

<img src={{ i['pic'] }}>

您可以查看渲染页面的源代码，并查看：

<img src=image.jpg>

这有两个问题：

• 该属性应该有引号 (<img src="image.jpg">)
• 试图从浏览器中呈现的任何路径加载文件，因此如果 URL 是 http://example.com/subdir/，它会在 http://example.com/subdir/image.jpg 处查找图像。这也可以在浏览器开发工具的“网络”标签中进行验证。

解决办法，用flask的url_for函数构建URL：

<img src="{{ url_for('static', filename=i['pic']) }}">

当然，这假设您已将文件保存到服务器上的static 目录。您可能希望在 python 代码中确保这一点：

import os
# ...
pic = secure_filename(f.filename)
f.save(os.path.join('static', pic))