开设url
前端页面
和登录页面一样正常搭建，采用form组件提交的用户头像，注意form标签需要设置enctype="multipart/form-data"参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="/static/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<title>修改头像页</title>
<style>
.container {
margin-top: 13%;
}
body {
background-color: rgb(224, 228, 232);
}
.col-md-4 {
background-color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<br>
<h3 class="text-center">修改头像</h3>
<form action="" method="post" enctype="multipart/form-data" >
{% csrf_token %}
<div class="form-group">
<label for="">用户名：</label>
<input type="text" id="id_username" class="form-control" value="{{ request.user.username }}" disabled>
</div>
<div class="form-group">
<label for="">原头像：</label>
<img src="/media/{{ request.user.avatar }}/" alt="" width="80">
</div>
<div class="form-group">
<label for="myfile">新头像： <img src="/static/img/default.png" alt="" width="80" id="myimg"></label>
<input type="file" id="myfile" name="avatar" style="display: none">
</div>
<div class="form-group">
<input type="submit" class="btn btn-success form-control" id="commit">
</div>
</form>
<br>
<br>
</div>
</div>
</div>
</body>
<script>
$('#myfile').change(function () {
// 2.生成一个文件阅读器对象，用来保存用户上传的头像
let fileReaderObj = new FileReader();
// 3.获取到用户上传的头像对象
let fileObj = $(this)[0].files[0];
// 4.将头像对象交给文件阅读器对象读取，注意这是一个异步IO操作，需要等待其读取完毕再执行第5步
fileReaderObj.readAsDataURL(fileObj);
fileReaderObj.onload = function () { //等待文件阅读器对象读取完毕
// 5.将读取的头像内容在展示给前端，修改img的src属性
$('#myimg').attr('src', fileReaderObj.result)
}
})
</script>
</html>
后端视图搭建
注意采用第二种方式更新用户头像，采用update方法，会使得用户头像字段保存的路径出错！！
@login_required
def set_avatar(request):
if request.method == 'POST':
# 1.获取新头像
avatar = request.FILES.get('avatar')
# 2.操作用户表更新头像
user_obj = models.UserInfo.objects.filter(username=request.user.username).first()
user_obj.avatar = avatar
user_obj.save()
return HttpResponseRedirect('/home/')
return render(request,'backend/set_avatar.html',locals())