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

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

• Flask
yizhihongxing

我们来详细讲解一下“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技术站

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

相关文章

  • python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)

    下面是对于“python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)”的详细攻略： 前言 Python作为动态语言，有着超高的开发效率，但是受限于解释器性能，Python在运行大型任务时性能一般。因此，我们在开发Web应用程序时，通常会使用Web框架来提高性能。 常用的Python Web框架有Django…

    Flask 2023年5月15日
    00

  • Python flask框架post接口调用示例

    下面是“Python Flask框架POST接口调用示例”的完整攻略： 1. 确保flask和requests已安装 在开始之前，需要确保flask和requests已安装。如果没有安装可以在命令行中使用以下命令进行安装： pip install flask pip install requests 2. 创建Flask应用程序 创建一个Python脚本ap…

    Flask 2023年5月15日
    00

  • Python使用Flask-SQLAlchemy连接数据库操作示例

    下面是关于Python使用Flask-SQLAlchemy连接数据库操作示例的完整攻略。本文将分为以下几个部分来讲解： 安装Flask-SQLAlchemy 创建数据库连接 数据库操作示例1：数据模型定义 数据库操作示例2：数据增删改查 1. 安装Flask-SQLAlchemy 在使用Flask-SQLAlchemy之前，我们需要先安装它。可以使用以下命令…

    Flask 2023年5月16日
    00

  • Python UI自动化测试Web frame及多窗口切换

    下面是针对“Python UI自动化测试Web frame及多窗口切换”的完整攻略，包含了示例说明： 1. Python UI自动化测试Web frame 对于Web frame的自动化测试，需要使用Selenium的WebDriver API。Selenium WebDriver封装了很多操作浏览器窗口和页面元素的API，可以方便地操作页面中的各种元素和完…

    Flask 2023年5月16日
    00

  • 查看Django和flask版本的方法

    查看Django和Flask的版本可以使用如下命令： 查看Django的版本 python -m django –version 如果你在虚拟环境下使用Django，需要先激活虚拟环境后再执行上述命令，例如： # 激活虚拟环境 source venv/bin/activate # 查看Django版本 python -m django –version …

    Flask 2023年5月15日
    00

  • YOLOv5部署到web端详细过程(flask+js简单易懂)

    我将为您详细讲解“YOLOv5部署到web端详细过程(flask+js简单易懂)”的完整攻略。过程中将会包含两条示例说明。 YOLOv5部署到web端详细过程(flask+js简单易懂) 1. 简介 本教程将介绍如何将YOLOv5模型部署到web端，使用Flask作为后端框架和JavaScript作为前端框架，在网页上完成检测并展示结果。我们将提供两个示例：…

    Flask 2023年5月15日
    00

  • Flask使用SQLAlchemy实现持久化数据

    当我们需要在Flask应用中使用关系型数据库，SQLAlchemy是一款功能强大，易于使用的Python ORM框架。在此，我将介绍如何在Flask应用中使用SQLAlchemy实现持久化数据。 步骤1：安装依赖 在开始前，我们需要安装依赖。在终端中执行以下命令安装依赖： pip install flask sqlalchemy 步骤2：创建Flask应用 …

    Flask 2023年5月16日
    00

  • jQuery实现Ajax功能分析【与Flask后台交互】

    下面详细讲解下“jQuery实现Ajax功能分析【与Flask后台交互】”的完整攻略。这个攻略主要分为以下几个部分： jQuery实现Ajax请求 与Flask后台交互 示例说明 一、jQuery实现Ajax请求 jQuery中提供了一个ajax()方法，用于发送异步请求。使用ajax()方法，可以轻松地实现Ajax请求，并且可配置许多选项来满足不同的需要。…

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