Django搭建个人博客：上传头像图片

summerpxy 发布于2019-07-30 18:37 / 2216人阅读

摘要：到目前为止我们的博客处理的都是文字。比如说图片上传是年月日，则图片会保存在中。添加标签用于上传图片。除了上传，图片的处理还包括验证格式改变尺寸更名裁剪美化等多种多样的需求。如果上传的图片重名，会导致报错吗请试试看。

到目前为止我们的博客处理的都是文字。现代互联网早就进入了“读图”时代，图片的维护、展示也就相当重要。

上一章中预留了avatar字段，用来保存用户上传的头像，现在我们来实现这个功能。

必要的设置

图片属于一种媒体文件，它与静态文件类似，需要设置一个统一的目录，便于集中存储和访问。

这类需要框架统一设置的参数，当然应该在/my_blog/settings.py中。在底部加上：

/my_blog/settings.py

...

# 媒体文件地址
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media/")

MEDIA_ROOT和MEDIA_URL是用户上传文件保存、访问的位置：

在前面的Profile中我们设置了upload_to参数。有了这个参数，文件上传后将自动保存到项目根目录的media文件夹中。 os.path.join(MEDIA_ROOT, "media/")指定了media文件夹的位置。

MEDIA_URL代表用户通过URL来访问这个本地地址的URL。设置好这个参数后，用户就可以通过解析url，很方便的获取文件的地址。这样做的好处是避免的硬编码，让代码更容易维护。

Django框架擅长的是对逻辑的处理，而对图片这类文件的处理则非常的耗时。因此在实际的生产环境中（即产品上线之后），通常是有专门的Web服务器来处理文件的访问。

而在开发阶段我们不会在意效率问题，所以Django也提供了方法，让开发服务器能够处理图片。

在/my_blog/urls.py添加下面的语句：

/my_blog/urls.py

...
# 新引入的模块
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    ...
]

#添加这行
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

这样就为以后上传的图片配置好了URL路径。

编写MTV

回顾一下，avatar的字段已经在上一章写好了：

/userprofile/models.py

...
class Profile(models.Model):
    ...
    avatar = models.ImageField(upload_to="avatar/%Y%m%d/", blank=True)
    ...

upload_to指定了图片上传的位置，即/media/avatar/%Y%m%d/。%Y%m%d是日期格式化的写法，会最终格式化为系统时间。比如说图片上传是2018年12月5日，则图片会保存在/media/avatar/2018205/中。

注意ImageField字段不会存储图片本身，而仅仅保存图片的地址。

记得用pip指令安装Pillow。

表单类在前面也写好了，不用修改：

/userprofile/forms.py

...
class ProfileForm(forms.ModelForm):
    class Meta:
        model = Profile
        fields = ("phone", "avatar", "bio")

接着需要修改视图，使之能够对图片进行处理：

/userprofile/views.py

...
@login_required(login_url="/userprofile/login/")
def profile_edit(request, id):
    ...

    # 修改本行
    # 上传的文件保存在 request.FILES 中，通过参数传递给表单类
    profile_form = ProfileForm(request.POST, request.FILES)

    if profile_form.is_valid():
        ...
        
        # 添加在 profile.bio = profile_cd["bio"] 后面
        # 如果 request.FILES 存在文件，则保存
        if "avatar" in request.FILES:
            profile.avatar = profile_cd["avatar"]

        ...

表单上传的文件对象存储在类字典对象request.FILES中，因此需要修改表单类的参数，将它一并传递进去。

如果request.FILES中存在键为avatar的元素，则将其赋值给profile.avatar（注意保存的是图片地址）；否则不进行处理。

修改模板文件，添加代码显示、处理用户的头像：

/templates/userprofile/edit.html

...

{% if profile.avatar %}
    头像
    
{% else %}
    暂无头像
{% endif %}




{% csrf_token %}
    
    
        上传头像
        
    
    
    ...

模板语法{% if ... %}判断用户是否上传头像。

标签用于显示图片内容；在style属性中规定了图片的最大宽度并带有一点的圆角。

注意，表单必须设置enctype="multipart/form-data"属性，才能够正确上传图片等文件。

添加标签用于上传图片。

启动服务器，刷新用户信息页面：

点击选择图片，上传一张图片后点击提交：

查看一下项目目录，生成了新的文件夹media/avatar/20181205/，其中存储了该头像文件；在SQLiteStudio中查看avatar字段，其保存的是文件的url地址。

除了上传，图片的处理还包括验证格式、改变尺寸、更名、裁剪、美化等多种多样的需求。

如果上传的图片重名，会导致报错吗？请试试看。

更改图片仅仅会改变字段中存储的url，并不会真正删除图片本身。因此在处理大容量文件时要小心，需要额外的方法进行清理。

总结

本章学习了通过表单上传文件的基础知识。更加高级的文件处理手段还需在探索中不断发掘。你还可以利用BootStrap知识，美化个人信息外观，使它像一个完善的产品级页面。

有疑问请在杜赛的个人网站留言，我会尽快回复。

或Email私信我：dusaiphoto@foxmail.com

项目完整代码：Django_blog_tutorial

转载请告知作者并注明出处。

专线服务混合云 php上传个人头像搭建个人博客个人博客搭建如何用wordpress搭建个人博客

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/42755.html

Django搭建个人博客：给文章加个漂亮的标题图

摘要：下一步就是修改视图。判断语句的条件有两个博文的标题图不是必须的，剔除掉没有标题图的文章，这些文章不需要处理图片。总结本章学习了如何上传并处理文章的标题图，从此博客首页就有了漂亮的外观。现在虽然博客的功能大都实现了，但是界面还是比较朴素，特别是首页的文章列表几乎全是文字，看多了难免疲劳。因此，给每个文章标题配一张标题图，不仅美观，用户也能通过图片快速了解文章内容。实际上大部分社交网站也...

taowen 2019-07-31 10:06 评论0 收藏0
Django搭建个人博客：扩展用户信息

摘要：博客网站的用户信息并不复杂，因此扩展就足够了。可以在这个基础上，扩展为一个美观详细的用户信息页面。当然最好再给个人信息添加一个入口。没有对用户的登录状态进行检查。总结本章使用一对一链接的方式，扩展并更新了用户信息。可能你已经发现了，Django自带的User模型非常实用，以至于我们没有写用户管理相关的任何模型。但是自带的User毕竟可用的字段较少。比方说非常重要的电话号码、头像等都...

Eastboat 2019-07-30 18:37 评论0 收藏0
Django搭建个人博客：使用django-ckeditor富文本编辑器

摘要：后面两个编辑器自带，不用单独下载，添上就可以了添加相关插件这样就完成了代码高亮效果不错在前台使用为了让用户在前台也能使用富文本编辑器，还得对代码稍加改动。对于有些不喜欢的人来说，甚至可以连博文都使用提供的富文本编辑器。前面我们已经实现了用Markdown语法写文章了。但是文章的评论用Markdown就不太合适了，你不能强求用户也花时间去熟悉语法啊。另外评论中通常还有表情、带颜色的字体...

beanlam 2019-07-31 10:11 评论0 收藏0
使用 Vue2.js + Node.js 搭建一个小型的全栈项目

摘要：大概过来一个多月，我决定两路开工。使用给前端写接口，配备后台管理功能，先把后台搭建好。大概几天过后，后台一些简单的功能实现后，就开始用开始搭建前台，也一直在想做点什么比较好，于是就做了个豆瓣评分类似的项目。写在前面由于最近公司业务不是很忙，空闲时间比较多，于是就在纠结Vue.js（之前就学习过）和Node.js先专研哪个比较好，最终选择了先玩玩Node.js。经过一段时间的学习，就...

freewolf 2019-08-21 16:20 评论0 收藏0