头像样式

 <style>
        .round_icon {
            width: 34px;
            height: 34px;
            display: flex;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
    </style>

 

#models
# media跟app同级
from django.contrib.auth.models import AbstractUser

class user_info(AbstractUser):
    telephone = models.CharField(max_length=11)
    icon = models.ImageField(upload_to='icon', default='default.png')

    def __str__(self):
        return self.username
# settings

# icon文件夹开放
# MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')  # 现在的BASEDIR是luffyapi下的luffyapi

# url
from django.views.static import serve
from django.conf import settings

urlpatterns = [
# 图像接口开放
    url('media/(?P<path>.*)', serve, {'document_root': 
settings.MEDIA_ROOT}),
]

 

<!-- 1. form提交文件-->
<!--新的头像提交到后端-->
老的头像
<div>
    <img src="media/{{ request.tracer.user.icon }}" class="round_icon" alt="">
</div>
<form id="myForm" enctype="multipart/form-data" method="post">
    {% csrf_token %}
    <div>
        <label for="id_icon">
            <!--新的头像展示-->
            <img src="" class="round_icon" alt="更换头像" id="myImg">
        </label>
    </div>
    <input type="file" id="id_icon" name="icon" style="display: none">

    <input type="submit"  value="提交">

<script>
    // 老头像展示 新头像预览
    $('#id_icon').change(function () {
        // 1.文件阅读器对象
        let myFileObj = new FileReader();
        // 2.获取用户上传的文件对象
        let fileObi = $(this)[0].files[0];
        // 3.将文件对象交给阅读器对象
        myFileObj.readAsDataURL(fileObi) // 异步操作， IO操作
        // 4.利用文件阅读器将文件展示到前端页面，修改是src属性
        // 5. 等待文件阅读器加载完毕
        myFileObj.onload = function () {
            $('#myImg').attr('src', myFileObj.result)
        }
    })

</script>

# 1. 后端处理

def change_icon(request):
    """头像改变"""
    dic = {
        'status': 1,
        'msg': ""
    }
    if request.method == 'GET':
        return render(request, 'icon.html')

    icon = request.FILES.get('icon')
    # models.user_info.objects.filter(username=request.tracer.user.username).update(icon=icon)
    request.tracer.user.icon = icon
    request.tracer.user.save()
    print(icon)
    return render(request, 'home.html')

<!--二Ajax提交文件-->

<!--新的头像提交到后端-->
老的头像
<div>
    <img src="media/{{ request.tracer.user.icon }}" class="round_icon" alt="">
</div>
<form id="myForm">
    {% csrf_token %}
    <div>
        <label for="id_icon">
            <!--新的头像展示-->
            <img src="" class="round_icon" alt="更换头像" id="myImg">
        </label>
    </div>
    <input type="file" id="id_icon" name="icon" style="display: none">

    <input type="button" id="id_button" value="提交">
</form>

<script src="{% static 'plugin/jquery-3.4.1/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>

<script>
    // 老头像展示 新头像预览
    $('#id_icon').change(function () {
        // 1.文件阅读器对象
        let myFileObj = new FileReader();
        // 2.获取用户上传的文件对象
        let fileObi = $(this)[0].files[0];
        // 3.将文件对象交给阅读器对象
        myFileObj.readAsDataURL(fileObi) // 异步操作， IO操作
        // 4.利用文件阅读器将文件展示到前端页面，修改是src属性
        // 5. 等待文件阅读器加载完毕
        myFileObj.onload = function () {
            $('#myImg').attr('src', myFileObj.result)
        }
    })

</script>

<script>
    // Ajax提交
    $('#id_button').click(function () {
        var myFormData = new FormData();
        // 普通键

        $.each($('#myForm').serializeArray(), function (index, obj) {
            myFormData.append(obj.name, obj.value)
        })
        myFormData.append('icon', $('#id_icon')[0].files[0]);  // 获取input框内部用户上传的文件对象

        $.ajax({
            url: "{% url 'change_icon' %}",
            type: "post",
            data: myFormData,
            processData: false,  // 让浏览器不要对你的数据进行任何的操作
            contentType: false,  // 不要使用任何编码格式 对象formdata自带编码格式并且django能够识别该对象
            success: function (ret) {
                if (ret.status) {
                    // console.log($('#myForm').serializeArray()) // [{}]
                    //console.log($('#myForm').serialize()) // urlencode 类似于字符传 被解析到request.POST字典中

                    location.href = "{% url 'home' %}"
                }
            }
        })
    })
</script>

# 2.后端处理
def change_icon(request):
    '''
 头像改变
 '''
    dic = {
        'status': 1,
        'msg': ""
    }
    if request.method == 'GET':
        return render(request, 'icon.html')

    icon = request.FILES.get('icon')
    # models.user_info.objects.filter(username=request.tracer.user.username).update(icon=icon)
    request.tracer.user.icon = icon
    request.tracer.user.save()
    return JsonResponse(dic)