时间：2023-04-30 05:09:02 | 来源：网站运营
时间：2023-04-30 05:09:02 来源：网站运营
网站添加用户头像功能（基于Django框架）：
在线咨询
ImageField字段来上传图像作为头像，但是之后觉得这样比较麻烦，因为这样每次上传的图片都会堆积在服务器，会对服务器造成一定的压力，而且还需要对上传的图片进行命名的处理，否则可能会造成同样名称的文件相互覆盖，所以最后我打算不使用这种方法，而是将用户的上传的图像进行base64编码，然后使用TextField来保存对应的编码，这样不仅避免图片在服务器堆积，而且可以提高头像的加载速度。from django.db import modelsfrom django.contrib.auth.models import User# Create your models here.# 创建一个新的模型，通过外键关联到User这个模型，从而对User进行定义class Add_User_Info(models.Model): # 通过外键关联User user = models.OneToOneField(User, on_delete=models.CASCADE) user_img_base64 = models.TextField(default='')def get_user_img(self): if Add_User_Info.objects.filter(user=self).exists(): return Add_User_Info.objects.get(user=self).user_img_base64 else: return ''User.get_user_img = get_user_img这里还定义了方法get_user_img，是为了能够直接通过User.get_user_img()来得到user_img_base64字段的内容，而不是通过Add_User_Info这个字段来间接查询到。{% extends 'new_siwei.html' %}{% load staticfiles %}{% block hea %}<title>{{ title }}</title><link rel="stylesheet" type="text/css" href="/static/CSS/font-awesome.4.6.0.css"><link rel="stylesheet" href="/static/CSS/amazeui.min.css"><link rel="stylesheet" href="/static/CSS/amazeui.cropper.css"><link rel="stylesheet" href="/static/CSS/custom_up_img.css">{% endblock %}{% block other %}<div class='containter'> <div class='row'> <div class='col-xs-10 col-xs-offset-1'> {% if user.is_authenticated %} <h2> {{ user.username }} </h2> <ul> {% if user.get_nickname == '' %} <li>昵称：没有昵称⊙_⊙ <a id='lg_a' href='/change_nickname/?from={{ request.get_full_path }}'>创建昵称</a></li> {% else %} <li> <div class="up-img-cover" id="up-img-touch" style="display: inline-block"> <span id="lg_a" onclick="" style="cursor: pointer;" data-am-popover="{content: '点击上传', trigger: 'hover focus'}">修改头像</span> </div> </li> <li><a id='lg_a' href='/change_password/?from={{ request.get_full_path }}'>修改密码</a></li> <li><a id='lg_a' href='/change_nickname/?from={{ request.get_full_path }}'>修改昵称</a></li> <li><div>昵称：{{ user.get_nickname }} </div></li> {% endif %} <li> 邮箱：{% if user.email %}{{ user.email }}{% else %} 未绑定 <a id='lg_a' href='/bind_email/?from={{ request.get_full_path }}'>绑定</a> {% endif %} </li> <li> 近期登录：{{ user.last_login|date:"Y-m-d H:i:s" }} </li> <li> 最近浏览： <ul> {% for article in articles %} <li style="list-style-type:none; width:70%"> <span id='lg_a' class='glyphicon glyphicon-phone'></span><a href='/new_blog/content/?page={{ article.content_object.pk }}' target="_blank"> {{ article.content_object.title }}</a><span style='float: right'>{{ article.Read_time }}</span> </li> {% endfor %} </ul> </li> </ul> {% else %} <span> 未登录，跳转到首页。。。 </span> <script type='text/javascript'> window.location.href = '/main'; </script> {% endif %} </div> </div></div> <div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1"> <div class="am-modal-dialog up-frame-parent up-frame-radius"> <div class="am-modal-hd up-frame-header"> <label>修改头像</label> <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>×</a> </div> <div class="am-modal-bd up-frame-body"> <div class="am-g am-fl"> <div class="am-form-group am-form-file"> <div class="am-fl"> <button type="button" class="am-btn am-btn-default am-btn-sm"> <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button> </div> <input type="file" id="inputImage"> </div> </div> <div class="am-g am-fl" > <div class="up-pre-before up-frame-radius"> <img alt="" src="" id="image" > </div> <div class="up-pre-after up-frame-radius"> </div> </div> <div class="am-g am-fl"> <div class="up-control-btns"> <span class="am-icon-rotate-left" onclick="rotateimgleft()"></span> <span class="am-icon-rotate-right" onclick="rotateimgright()"></span> <span class="am-icon-check" id="up-btn-ok" url="/update_user_img/"></span> </div> </div> </div> </div></div><!--加载框--><div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading"> <div class="am-modal-dialog"> <div class="am-modal-hd">正在上传...</div> <div class="am-modal-bd"> <span class="am-icon-spinner am-icon-spin"></span> </div> </div></div><!--警告框--><div class="am-modal am-modal-alert" tabindex="-1" id="my-alert"> <div class="am-modal-dialog"> <div class="am-modal-hd">信息</div> <div class="am-modal-bd" id="alert_content"> 头像上传成功！ </div> <div class="am-modal-footer"> <span class="am-modal-btn">确定</span> </div> </div></div><script src="/static/JS/jquery-1.8.3.min.js"></script><script src="/static/JS/amazeui.min.js" charset="utf-8"></script><script src="/static/JS/cropper.min.js" charset="utf-8"></script><script src="/static/JS/custom_up_img.js" charset="utf-8"></script>{% endblock %}{% block footer %}{% endblock %}from django.shortcuts import render, HttpResponsefrom django.http import JsonResponsefrom .models import Add_User_Infofrom django.views.decorators.csrf import csrf_exempt# 头像上传对应的方法@csrf_exemptdef upload_result(request): if request.method == 'POST': data = {} data['status'] = 'SUCCESS' data['message'] = '上传成功' user = request.user if user.is_anonymous: # 未登录，不能进行头像的更改 data['status'] = 'ERROR' data['message'] = '未登录' return JsonResponse(data) # 判断对应的记录是否存在，如果不存在则创建对应的记录 if not Add_User_Info.objects.filter(user=user).exists(): rc = Add_User_Info(user=user) rc.save() update = Add_User_Info.objects.get(user=user) update.user_img_base64 = request.POST['image'] update.save() return JsonResponse(data) return HttpResponse('该请求不符合条件！')这里使用了csrf_exempt这个修饰器，是因为前端是通过POST请求发送的数据，所以就需要用到CSRF令牌，这里为了方便就直接在该方法中使用修饰器禁用了CSRF令牌。关键词：功能,头像,用户
