1. Python技术站首页
  2. Web开发
  3. Flask

Flask 上传自定义头像的实例详解

• Flask

我们来详细讲解一下“Flask 上传自定义头像的实例详解”的完整攻略。

1. 确定需求

首先，我们需要明确我们的需求，即用户能够上传自己的头像，并在用户页面中显示。这个功能可以分为两个部分：

  1. 用户头像上传：用户需要有一个页面来上传头像，并把上传的头像保存在服务器上。
  2. 用户头像显示：用户上传了头像后，在用户页面中可以显示出来。

2. 创建Flask应用

在开始编写代码之前，我们需要创建一个Flask应用。可以使用如下代码：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello, World!'

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

这段代码会创建一个简单的Flask应用，并在访问根路径时返回“Hello, World!”的字符串，我们可以在这个应用的基础上开始编写我们的头像上传功能。

3. 用户头像上传

3.1. 创建上传页面

第一步，我们需要创建一个上传页面，让用户上传他们的头像。可以使用如下代码：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('upload.html')

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

这个代码会创建一个上传页面，并使用render_template()函数来渲染一个名为upload.html的HTML模板文件。我们需要在templates文件夹下创建一个名为upload.html的文件，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload Avatar</title>
</head>
<body>
    <h1>Upload Your Avatar</h1>
    <form action="/" method="post" enctype="multipart/form-data">
        <input type="file" name="avatar">
        <input type="submit" value="Upload">
    </form>
</body>
</html>

这个模板文件包含一个标题，一个表单和一个按钮。表单为提交类型，enctype属性为multipart/form-data，这是因为我们要上传一个文件。在表单中，我们有一个文件选择器和一个提交按钮。

3.2. 处理上传操作

第二步，我们需要处理用户提交的头像文件。可以使用如下代码：

from flask import Flask, render_template, request, redirect, url_for, flash
from werkzeug.utils import secure_filename
import os

app = Flask(__name__)

app.config['SECRET_KEY'] = 'your_secret_key_here'
app.config['UPLOAD_FOLDER'] = './uploads'
app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif'}

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['avatar']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            flash('Upload success!')
            return redirect(url_for('index'))
        else:
            flash('Upload failed!')
    return render_template('upload.html')

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

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

这个代码添加了一个新的upload_file()函数，用来处理上传请求。首先，我们检查提交的请求是否为POST请求，如果是，我们取出上传的文件，并检查文件名是否合法。在我们的示例中，我们只接受以下文件类型：png、jpg、jpeg和gif。如果文件名不合法，我们提示上传失败；否则，我们使用secure_filename()函数来获取一个安全的文件名，并把文件保存到服务器本地文件夹./uploads中。保存完成后，我们给用户一个提示，让他们知道文件已经成功上传。最后，我们重定向到index()函数。注意，我们还需要在应用中添加一个新的uploads()函数，用来处理已经上传的文件，并将其显示在用户页面中。

4. 用户头像显示

4.1. 更新用户信息

第一步，我们需要更新用户信息，添加用户头像信息。可以使用如下代码：

from flask import Flask, render_template, request, redirect, url_for, flash
from werkzeug.utils import secure_filename
import os
import random

app = Flask(__name__)

app.config['SECRET_KEY'] = 'your_secret_key_here'
app.config['UPLOAD_FOLDER'] = './uploads'
app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif'}

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']

class User:
    def __init__(self, username):
        self.username = username
        self.avatar = None

users = {}

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['avatar']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            flash('Upload success!')
            username = request.form.get('username')
            user = users.get(username)
            if user is None:
                user = User(username)
                users[username] = user
            user.avatar = filename
            return redirect(url_for('index'))
        else:
            flash('Upload failed!')
    return render_template('upload.html')

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

@app.route('/user/<username>')
def view_user(username):
    user = users.get(username)
    if user is None:
        return 'Invalid user!'
    else:
        return render_template('user.html', user=user)

@app.route('/users')
def view_users():
    return render_template('users.html', users=users)

@app.route('/random')
def random_user():
    keys = list(users.keys())
    username = random.choice(keys)
    return redirect(url_for('view_user', username=username))

@app.route('/delete/<username>')
def delete_user(username):
    user = users.pop(username, None)
    if user is None:
        return 'Invalid user!'
    else:
        return redirect(url_for('view_users'))

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

这个代码为User类添加一个avatar属性，并在头像上传完毕后更新用户信息。当用户上传他们的头像时，我们修改他们的User对象的avatar属性，并返回主页。注意，我们还需要添加一些新的函数来展示用户信息和用户列表，这些函数在下一步中进行讨论。

4.2. 创建用户页面

第二步，我们需要创建一个用户页面，用来展示用户的信息和头像。可以使用如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ user.username }}</title>
</head>
<body>
    <h1>{{ user.username }}</h1>
    {% if user.avatar %}
    <img src="{{ url_for('uploaded_file', filename=user.avatar) }}" alt="{{ user.username }}" width="100">
    {% else %}
    <p>No avatar.</p>
    {% endif %}
</body>
</html>

这个模板文件包含一个标题和一个条件渲染。如果用户有头像，我们展示该头像，否则我们展示一段“无头像”的文字信息。使用url_for()函数来为图片生成一个可访问的URL。

4.3. 创建用户列表

第三步，我们需要创建一个用户列表页面，用来展示所有用户和他们的信息。可以使用如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Users</title>
</head>
<body>
    <h1>Users</h1>
    {% for username, user in users.items() %}
    <p><a href="{{ url_for('view_user', username=username) }}">{{ username }}</a></p>
    {% endfor %}
</body>
</html>

这个模板文件包含一个标题和一个循环，用来展示所有的用户和他们的信息。对于每一个用户，我们展示他们的用户名和一个链接到他们的用户页面的链接。

5. 运行应用

最后一步，我们要运行我们的Flask应用。可以使用如下命令：

python app.py

这个命令会启动我们的Flask应用，并在端口5000上进行监听。我们可以在浏览器中访问http://localhost:5000来访问我们的应用。此时，在页面的顶部，我们可以看到一个上传头像的链接。点击这个链接，会跳转到我们之前创建的上传页面，我们可以在此上传自己的头像。上传完毕后，我们可以访问http://localhost:5000/user/username，来查看我们的头像和个人信息。我们还可以访问http://localhost:5000/users来查看所有的用户和他们的信息。

这就是我们的“Flask 上传自定义头像的实例详解”的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Flask 上传自定义头像的实例详解 - Python技术站

赞 (1)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月16日
下一篇 2023年5月16日

相关文章

  • 基于SQLAlchemy实现操作MySQL并执行原生sql语句

    基于SQLAlchemy实现操作MySQL并执行原生sql语句的完整攻略如下： 安装SQLAlchemy 首先需要安装SQLAlchemy，可以通过pip命令安装： pip install sqlalchemy 连接到MySQL数据库 使用SQLAlchemy连接到MySQL数据库的代码如下： from sqlalchemy import create_en…

    Flask 2023年5月16日
    00

  • 在Python的Flask框架中使用模版的入门教程

    在Python的Flask框架中使用模板是非常常见的操作，因为它能够帮助我们更快地开发网站，同时也能够方便我们管理网站的视图和数据。下面是在Python的Flask框架中使用模板的入门教程及两条示例说明。 1. 安装Flask框架 首先，我们需要在本地环境中安装Flask框架。可以通过以下命令来安装： pip install flask 2. 创建Flask…

    Flask 2023年5月15日
    00

  • Flask模板引擎之Jinja2语法介绍

    Flask模板引擎之Jinja2语法介绍 在Flask中，Jinja2是为构建动态web应用程序提供的一个模板引擎，可以轻松地将应用程序与HTML（或其他文本）集成，并在呈现页面之前修改动态内容。 变量 在Jinja2中，使用双大括号来包含变量名，如 {{ variable_name }}。 <!DOCTYPE html> <html&gt…

    Flask 2023年5月15日
    00

  • 5分钟教会你用Docker部署一个Python应用

    下面我将提供一个完整的攻略，教会你如何用 Docker 部署一个 Python 应用。 第一步：安装 Docker 首先，你需要在你的机器上安装 Docker。在这里，我提供两种安装方式。 方式一：通过官方安装脚本进行安装 可以通过 Docker 官方网站提供的安装脚本进行安装。在终端中输入以下命令： curl -sSL https://get.docker…

    Flask 2023年5月16日
    00

  • Python Type Hints 学习之从入门到实践

    下面是详细讲解“Python Type Hints 学习之从入门到实践”的完整攻略： Python Type Hints 学习之从入门到实践 什么是 Python Type Hints Python 从 3.5 版本开始引入了 Type Hints 的概念，它是一种用于标注函数、变量、类等对象类型的注释。Python 并不会在运行时对其进行强制校验，但是可以…

    Flask 2023年5月16日
    00

  • 如何使用Cython对python代码进行加密

    使用Cython对Python代码进行加密，通常是通过将Python代码编译为Cython模块，该模块可以加密并保护您的Python代码。下面我们来一步步了解如何使用Cython对Python代码进行加密。 第一步: 安装Cython 在开始使用Cython编译Python代码之前，您需要先安装Cython。您可以使用pip来安装Cython，可以在命令行界…

    Flask 2023年5月16日
    00

  • flask上传作品之dbm操作的实现

    下面我将详细讲解“flask上传作品之dbm操作的实现”的完整攻略。 1. 确定需求与工具 在开始编码之前，我们需要明确需求并选好所需要的工具。 需求：实现通过flask上传作品并将相关信息储存在dbm数据库中。 工具：flask、dbm 2. 导入所需模块 在编写代码之前，我们需要先导入所需的模块。下面是一个简单的导入步骤，需要额外安装flask和dbm包…

    Flask 2023年5月16日
    00

  • python文件路径操作方法总结

    基于”python文件路径操作方法总结”这个主题，我会给出完整的攻略，包括以下几个部分的讲解： 什么是文件路径？ Python中的文件路径表示方式 文件路径的操作方式（包括绝对路径和相对路径） 示例说明 1. 什么是文件路径？ 文件路径是标识文件在计算机上存储位置的一串字符，一般包括文件所在驱动器、目录、文件名和文件扩展名等内容。 在Windows上，文件路…

    Flask 2023年5月16日
    00
合作推广
合作推广
分享本页
返回顶部