django改变用户头像

添加字段

为了更改用户的头像，我们可以在我们的用户模块中添加用户头像字段

img_url=models.CharField(max_length=100,verbose_name='img_url',default='')

这里我max_length设了100，不过如果为了让数据库的查询更快，这个属性应该越小越好
这里用的是url，因为这个项目中图片上传都是用的fdfs，至于怎么使用fdfs请参考我的博客https://blog.csdn.net/lvbu89757/article/details/94735057
添加字段以后别忘记迁移

添加视图逻辑

因为修改用户头像需要登录，而且只需要改变获取到的用户的单个字段，所以就简单写了一个视图，这个视图还没有写验证

class User_icon(APIView):
    permission_classes = [IsAuthenticated]
    def post(self,request):
    	通过jwt验证获取用户信息
        user_obj=self.request.user
        创建fdfs对象
        fdfs=fdfs_storage.FastdfsStorageClass()
        通过fdfs储存post请求中的img信息，返回一个图片url
        ret=fdfs.save('mytest',request.data.get('img'))
        把返回的url存到数据库中
       	user_obj.img_url=ret
        user_obj.save()
		同时返回这个url到前端
        return Response(ret)

注册视图到url中

在用户模块的urls.py文件中添加

from django.conf.urls import url,include
from . import views

urlpatterns = [
	.................
    url(r'^usericon',views.User_icon.as_view())
]

用户中心添加用户头像

$(function () {
    token=localStorage.token
    alert(token)
    var password
    $.get()
    初始化界面时需要往网页中添加的信息
    $.ajax({
        url:'http://127.0.0.1:8000/loginuser/',
        method:'GET',
        headers:{
            'Authorization':'JWT '+token
        },
        success(data){
          console.log(data)
            console.log(typeof (data))
            $('#cusername').text(data.username)
            $('#usericon').attr({'src':'http://127.0.0.1:8888/'+data.img_url})
            id1=data.id
            email1=data.email
            这个是之前邮箱验证的部分
            $('#active_button').click(function () {
                $.ajax({
                    url:'http://127.0.0.1:8000/email/',
                    headers:{
                        'Authorization':'JWT '+token
                    },
                    type:'PUT',
                    data: {
                        _method: 'PUT',
                        id:id1,
                        email:email1
                    },
                    dataType:'json',
                    success:function () {
                    alert('okay')
                    }
                })
            })
            这是改变用户头像的ajax
            $('#usericon').click(function () {
                $('#hide_box').css('display','block')
                $('#icon_upload').click(function () {
                    var img=$('#icon_img')[0].files[0]
                    data={'img':img}
                    var formdata=new FormData()
                    formdata.append('img',img)
                    $.ajax({
                        headers:{
                        'Authorization':'JWT '+token
                        },
                        method:'POST',
                        data:formdata,
                        processData:false,
                        contentType:false,
                        dataType: 'json',
                        url:'http://127.0.0.1:8000/usericon',
                        success(data){
                            $('#usericon').attr({'src':'http://127.0.0.1:8888/'+data})
                            $('#hide_box').css('display','none')
                        },
                        error(data) {
                          alert('failure')
                        }
                    })
                })
            })
        },
        error(data){
          alert('failure')
            console.log(data)
            console.log(data['status'])
            if(data['status']==401) {
                location.href = '/templates/login.html?next=userinfo.html'
            }
        },
    })
})

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/userinfo.js"></script>
    <link rel="stylesheet" href="./css/userinfo.css">
    <title>Title</title>
</head>
<body>
<div class="user">
    <div style="display: none;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: wheat;" id="hide_box"><input type="file" id="icon_img"><input type="button" id="icon_upload" value="upload"></div>
    <div class="user_icon"><img id="usericon"></div>
    <div id="cusername"></div>
</div>

<div><input type="button" id="active_button" value="邮箱激活"></div>

</body>
</html>

测试

在这里插入图片描述

原文链接：https://blog.csdn.net/lvbu89757/article/details/97814545