首先创建一个media文件 这个是已经上传头像成功的文件目录显示

image.png

将这个文件在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")

上传文件

一、在用户注册model中写那个avatar头像那个字段

models.py
将头像avatar设置成ImageField upload_to是设置这个文件放的路径只是个相对路径一会会在前端页面中设置拼接这个图片地址，默认可以为空

class UsersProfile(AbstractUser):
    gender_choice=(
      ('1',"男"),
      ('2',"女"),
    )
    mobile = models.CharField('手机', 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表单验证中加入这个字段

class UserRegisterModelForm(forms.ModelForm):
    class Meta:
       # 这是要使用的model中的值
        model = UsersProfile
        #你要进行验证的字段 必须是fields这个变量
        fields = ['username','password','mobile','age','gender','avatar']

三、在h5页面form中加入avatar div盒子 并在form标签中加入一个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配置

# 访问文件的 URL
MEDIA_URL = '/media/'

在项目根url中配置

from django.urls import re_path
from 根项目名.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">

点击头像链接地址就能显示上面的media中的文件路径

image.png