完成上传自定义头像的功能

account/views.py

@@ -1,4 +1,5 @@
 # coding=utf-8
+import os
 import codecs
 import qrcode
 import StringIO
@@ -495,3 +496,20 @@ def user_rank_page(request, page=1):
                                                "previous_page": previous_page,
                                                "next_page": next_page,
                                                "start_id": int(page) * 20 - 20,})
+
+
+class AvatarUploadAPIView(APIView):
+    def post(self, request):
+        if "file" not in request.FILES:
+            return error_response(u"文件上传失败")
+
+        f = request.FILES["file"]
+        if f.size > 1024 * 1024:
+            return error_response(u"图片过大")
+        if os.path.splitext(f.name)[-1].lower() not in [".gif", ".jpg", ".jpeg", ".bmp", ".png"]:
+            return error_response(u"需要上传图片格式")
+        name = "avatar_" + rand_str(5) + os.path.splitext(f.name)[-1]
+        with open(os.path.join(settings.IMAGE_UPLOAD_DIR, name), "wb") as img:
+            for chunk in request.FILES["file"]:
+                img.write(chunk)
+        return success_response({"path": "/static/upload/" + name})

oj/urls.py

@@ -7,7 +7,7 @@ from account.views import (UserLoginAPIView, UsernameCheckAPIView, UserRegisterA
                            UserChangePasswordAPIView, EmailCheckAPIView,
                            UserAdminAPIView, UserInfoAPIView, ResetPasswordAPIView,
                            ApplyResetPasswordAPIView, SSOAPIView, UserProfileAPIView,
-                           TwoFactorAuthAPIView)
+                           TwoFactorAuthAPIView, AvatarUploadAPIView)
 
 from announcement.views import AnnouncementAdminAPIView
 
@@ -141,6 +141,7 @@ urlpatterns = [
     url(r'^two_factor_auth/$', TemplateView.as_view(template_name="oj/account/two_factor_auth.html"), name="two_factor_auth_page"),
     url(r'^rank/(?P<page>\d+)/$', "account.views.user_rank_page", name="user_rank_page"),
     url(r'^rank/$', "account.views.user_rank_page", name="user_rank_page"),
+    url(r'^api/avatar/upload/', AvatarUploadAPIView.as_view(), name="avatar_upload_api"),
 ]
 
 

static/src/css/global.css

@@ -63,7 +63,7 @@ pre, code {
     background-color: white;
 }
 
-#index-avatar{
+.big-avatar{
     height: 200px;
     width: 200px;
 }

static/src/js/app/oj/account/avatar.js

@@ -1,20 +1,26 @@
 require(["jquery", "bsAlert", "csrfToken", "uploader"], function ($, bsAlert, csrfTokenHeader, uploader) {
     var avatar = "";
-    var avatarUploader = uploader("#avatarUploader", "/",
+    var avatarUploader = uploader("#avatarUploader", "/api/avatar/upload/",
         {title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*'},
         function (file, response) {
-            //todo
+            if (response.code) {
+                bsAlert(response.data);
+            }
+            else {
+                avatar = response.data.path;
+                $('#current-avatar').attr('src', avatar);
+            }
         });
 
 
     function changeAvatar(event) {
         avatar = $(event.target).attr('src');
-        $('#current_avatar').attr('src', avatar);
+        $('#current-avatar').attr('src', avatar);
     }
 
     $('.avatar-item').click(changeAvatar);
 
-    $('#save_avatar').click(function () {
+    $('#save-avatar').click(function () {
         if (avatar)
             $.ajax({
                 beforeSend: csrfTokenHeader,

template/src/oj/account/avatar.html

@@ -15,9 +15,11 @@
             </ul>
         </div>
         <div class="col-lg-3">
-            <img src="{{ user.userprofile.avatar }}" class="img-responsive"
+            <img src="{{ user.userprofile.avatar }}" class="img-responsive big-avatar" id="current-avatar">
-                 style="height: 200px;width: 200px;" id="current_avatar">
             <br>
+            <div class="form-group left">
+                <button id="save-avatar" type="submit" class="btn btn-primary">保存</button>
+            </div>
         </div>
         <div class="col-lg-6">
             <h3>选择已有头像</h3>
@@ -43,10 +45,6 @@
             </div>
             <h3>上传自定义头像</h3>
             <div id="avatarUploader">选择头像</div>
-            <div class="form-group left">
-                <button id="save_avatar" type="submit" class="btn btn-primary">保存</button>
-            </div>
-
         </div>
     </div>
 {% endblock %}

template/src/oj/account/change_password.html

@@ -15,8 +15,7 @@
         </ul>
     </div>
     <div class="col-lg-3">
-        <img src="{{ user.userprofile.avatar }}" class="img-responsive"
+        <img src="{{ user.userprofile.avatar }}" class="img-responsive big-avatar">
-             style="height: 200px;width: 200px;">
     </div>
     <div class="col-lg-6">
         <form id="change_password-form">

template/src/oj/account/settings.html

@@ -15,7 +15,7 @@
         </ul>
     </div>
     <div class="col-lg-3">
-        <img src="{{ user.userprofile.avatar }}" class="img-responsive index-avatar">
+        <img src="{{ user.userprofile.avatar }}" class="img-responsive big-avatar">
     </div>
     <div class="col-lg-6">
         <form>

template/src/oj/account/user_index.html

@@ -6,7 +6,7 @@
     <div class="container main">
         <div class="col-lg-4">
             <div class="avatar">
-                <img src="{{ user.userprofile.avatar }}" class="img-responsive" id="index-avatar">
+                <img src="{{ user.userprofile.avatar }}" class="img-responsive big-avatar">
             </div>
             <div>
                 <h2>

utils/views.py

@@ -9,6 +9,7 @@ import logging
 
 logger = logging.getLogger("app_info")
 
+
 class SimditorImageUploadAPIView(APIView):
     def post(self, request):
         if "image" not in request.FILES: