首先創(chuàng)建一個(gè)media文件 這個(gè)是已經(jīng)上傳頭像成功的文件目錄顯示

image.png

將這個(gè)文件在settings配置一下

# 上傳文件圖片的根路徑
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.media',
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

上傳文件

一、在用戶(hù)注冊(cè)model中寫(xiě)那個(gè)avatar頭像那個(gè)字段

models.py
將頭像avatar設(shè)置成ImageField upload_to是設(shè)置這個(gè)文件放的路徑只是個(gè)相對(duì)路徑一會(huì)會(huì)在前端頁(yè)面中設(shè)置拼接這個(gè)圖片地址，默認(rèn)可以為空

class UsersProfile(AbstractUser):
    gender_choice=(
      ('1',"男"),
      ('2',"女"),
    )
    mobile = models.CharField('手機(jī)', max_length=11)
    gender = models.CharField("性別",choices=gender_choice,default="1",max_length=1)
    avatar = models.ImageField(verbose_name="頭像", upload_to='users/%Y/%m/%d/', max_length=128,
                                              null=True,blank=True)
    age = models.IntegerField("年齡",default=18)

二、在form表單驗(yàn)證中加入這個(gè)字段

class UserRegisterModelForm(forms.ModelForm):
    class Meta:
       # 這是要使用的model中的值
        model = UsersProfile
        #你要進(jìn)行驗(yàn)證的字段 必須是fields這個(gè)變量
        fields = ['username','password','mobile','age','gender','avatar']

三、在h5頁(yè)面form中加入avatar div盒子 并在form標(biāo)簽中加入一個(gè)enc_type

模板H5中上傳

 <form action="{% url 'app:usersRegister' %}" method="POST" enctype="multipart/form-data">
。。。

 <div class="form-group">
                <label for="{{ form.avatar.id_for_lable }}">頭像</label>
                <input type="file" name="avatar" class="form-control" placeholder="頭像" id = "id_avatar">
                <!-- {{ form.age }} -->
                {% if form.error.avatar %}
                <div class="alert alert-danger" role="alert">
                  {{ form.error.avatar.0 }}
                </div>
                {% endif %}
              </div>

前端顯示文件下載

settings配置

# 訪問(wèn)文件的 URL
MEDIA_URL = '/media/'

在項(xiàng)目根url中配置

from django.urls import re_path
from 根項(xiàng)目名.setting import  MEDIA_ROOT
from django.views.static import serve
urlpatterns=[
   re_path(r'^media/(?P<path>.*)$',serve,{"document_root": MEDIA_ROOT}),
]

模板中base

  <img src="{{ MEDIA_URL}}{{ request.user.avatar }}" alt="頭像" class="img-circle naver">

點(diǎn)擊頭像鏈接地址就能顯示上面的media中的文件路徑

image.png