Django+JS 实现点击头像即可更改头像的方法示例

这篇文章主要介绍了Django+JS 实现点击头像即可更改头像的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

首先，在models.py中创建UserModels类

 from django.db import models from django.contrib.auth.models import AbstractUser class UserModels(AbstractUser): nickname = models.CharField(max_length=50, null=True, verbose_name='用户昵称') mobile = models.CharField(max_length=11, null=True, verbose_name='电话') address = models.CharField(max_length=100, null=True, verbose_name='住址') sex = models.CharField(max_length=10, null=True, verbose_name='性别') head_img = models.ImageField(upload_to='%Y/%m', verbose_name='头像', null=True) class Meta: db_table = 'user' verbose_name = '用户' verbose_name_plural = verbose_name

想要显示在admin后台，则必须在admin.py文件中注册

 from django.contrib import admin from .models import UserModels admin.site.register(UserModels)

然后，在settings.py中，

 AUTH_USER_MODEL = 'customuser.UserModels' MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')

之后，python manage.py makemigrations

python manage.py migrate进行同步到数据库

然后，也就开始实现头像的更换

在urls.py中绑定路由：

 path('info/', TemplateView.as_view(template_name='user/userinfo.html'), name='user_info'), path('headimg/', headimg, name='user_img'),

在userinfo.html中：

html部分：

 form action="#" method="post"> {% csrf_token %}   个人信息
  头像
  {# input type="file" 这种标签，该标签自带的就有click事件。type='text'这种类型就没有点击事件。 #} 
昵称:
{{ request.user.nickname }}
电话:
{{ request.user.mobile }}
住址:
{{ request.user.address }}
性别:
{{ request.user.sex }}
个人简介:
主人很懒，什么也没有留下。
编辑个人资料

js部分：

 {# 点击头像图片，触发这个标签的click事件。#}

在views.py中完善函数：

 def headimg(request): if request.method == 'POST': # 前端ajax请求，将图片对象、图片名称传递到了后台的views.py中； img = request.FILES.get('img_file') # 获取数据库head_img字段的值，并切割成列表。 # ['2018', '10', 'h2.png-600'] path = request.user.head_img.url.split('/') # 将列表的最后一个元素图片名称，替换成新的图片名称 path[-1] = request.POST.get('img_name') # 再将列表合成一个字符串 path = '/'.join(path) url = settings.MEDIA_ROOT + '/' + path # 将ajax传过来的图片写入到本地/static/images/....目录下。 with open(url, 'wb') as f: for chunk in img.chunks(): f.write(chunk) # 以上步骤实现了图片的后台保存，还需要修改当前用户数据库中的头像路径。 request.user.head_img = path request.user.save() return HttpResponse('图片上传成功')

写完之后，我们就可以测试效果了：

首先，creatsuperuser 一个用户名：admin 密码：admin12345

之后，使用admin登录admin后台，在创建两个普通用户，分别设置一个图片作为头像