首先，在models.py中創建UserModels類

from django.db import modelsfrom django.contrib.auth.models import AbstractUserclass 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 adminfrom .models import UserModelsadmin.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 %}  </form>  <div class="header">    <div class="container">      <h2>個人信息</h2>    </div>  </div>  <div class="container">    <dl>      <dt>頭像</dt>      <dd id="file">        <img src="/static/images/{{ request.user.head_img }}" alt="" style="border-radius: 50%; width: 100px;height: 100px;" id="img-show">        {# input type="file" 這種標簽，該標簽自帶的就有click事件。type='text'這種類型就沒有點擊事件。 #}        <input type="file" id="img-upload" style="display: none;" onchange="uploadimg()">      </dd>      <dt>昵稱:</dt>      <dd>{{ request.user.nickname }}</dd>      <dt>電話:</dt>      <dd>{{ request.user.mobile }}</dd>      <dt>住址:</dt>      <dd>{{ request.user.address }}</dd>      <dt>性別:</dt>      <dd>{{ request.user.sex }}</dd>      <dt>個人簡介:</dt>      <dd>主人很懶，什么也沒有留下。</dd>    </dl>    <a href="{% url 'user_update' %}" rel="external nofollow" >編輯個人資料</a>    <hr>  </div>

js部分：

{# 點擊頭像圖片，觸發<input type="file">這個標簽的click事件。#}  <script>    $(document).ready(function(){      {# ready事件，指整個html文檔渲染完成以后，自動執行的操作。 #}      {# 自動執行什么操作？給img標簽綁定click事件。 onclick=""; .addEventLisenter("click", function(){}); $().click(); #}      $('#img-show').click(function () {        {# 只要點擊Img，就會觸發匿名函數的調用。 #}        {# 點擊圖片。觸發input的點擊事件。 #}        $('#img-upload').click();      })    });    function uploadimg() {      {#alert('你切換圖片了');#}      {# 主要工作：獲取選擇的圖片內容，讀取內容，并將這個圖片保存在圖像上。 #}      {# files: 這個屬性就是用來獲取input所選擇的內容。files[0]就是一個File對象，包含文件的名稱、文件的大小、文件的類型等信息。 #}      var img_file = $('#img-upload')[0].files[0];      {# 從文件對象img_file中讀取圖片內容，首先要創建一個文件讀取器。 #}      var reader_file = new FileReader();      {# 開始利用文件讀取器從img_file中讀取內容 #}      reader_file.readAsDataURL(img_file);      {# 等圖片讀取完成，reader_file有一個讀取成功的自動調用的回調事件 #}      reader_file.onload = function (ev) {        $('#img-show').attr('src', ev.target.result);        {# 頁面完成頭像修改以后，需要將用戶在數據庫中保存的頭像路徑也進行修改。需要在views.py中修改用戶的head_img值。 #}        {# ajax上傳圖片文件到django后臺：如何使用ajax請求將圖片傳給django后臺的View。 #}        var formdata = new FormData();        formdata.append('img_name', img_file.name);        formdata.append('img_file', img_file);        {# 構造表單對象，類似于<form>標簽。 #}        {# 如果使用ajax發送POST請求，要求攜帶的參數里面，必須帶有csrf這個隨機字符串。和<form>的驗證原理是一樣的。<input type="hidden" name="csrfmiddlewaretoken" value="nzssW2AKQg4OOth2xmYYCYQuPFEAxhkcNPW3wwLQX6CKm8LkWhusgsowh2IcARSN"> #}        formdata.append('csrfmiddlewaretoken', '{{ csrf_token }}');        $.ajax({          url: '{% url 'user_img' %}',          type: 'POST',          data: formdata,          {# processData：默認值是True，含義就是jQuery會對參數進行編碼，讓其轉化為一個查詢字符串。如果為FALSE，意思就是不需要jQuery對data: formdata這個數據做任何處理。 #}          {# 查詢字符串：一般出現在GET請求中，username='123'&password='456' #}          processData: false,          {# contentType: 該字段指的是此次請求攜帶的數據是什么累心數據。字段的默認值application/x-www-form-urlencoded。把它的值設置false，目的就是希望不使用默認的值對formdata進行轉換。 #}          contentType: false,          success: function(data, status) {            alert(data);          }        });        {# 1. ajax上傳文件(圖片、文件、音頻)需要使用POST請求； #}        {# 2. 需要將傳給后臺的數據，保存在FormData()表單對象中； #}        {# 3. POST請求需要攜帶cstf，ajax請求和<form>請求攜帶方式不一樣； #}        {# 4. ajax上傳文件的POST請求，需要指定兩個參數：processData: false；contentType: false；#}      }    }  </script>