Django項目實戰 - 修改用戶頭像

用戶頭像是一個ImageField，需要借助forms.ModelForm來實現

image = models.ImageField(upload_to="image/%Y/%m", default=u"image/default.png", max_length=100)

 

定義ModelForm

class UploadImageForm(forms.ModelForm):
    class Meta:
        model = UserProfile
        fields = ["image"]

 

編寫url

 url(r'^image/upload/$', UploadImageView.as_view(), name="image_upload"),

 

編寫view 方法1

這里需要注意的是用戶的頭像是保存在 request.FILES中的

class UploadImageView(LoginRequiredMixin, View):
    """
    用戶修改頭像
    """
    def post(self, request):
        image_form = UploadImageForm(request.POST, request.FILES)
        if image_form.is_valid():
            image = image_form.cleaned_data["image"]
            request.user.image = image
            request.user.save()
　　　　　　　return HttpResponse("{'status':'success'}", content_type='application/json')

 

編寫view 方法2

class UploadImageView(LoginRequiredMixin, View):
    """
    用戶修改頭像
    """
    def post(self, request):
        image_form = UploadImageForm(request.POST, request.FILES, instance=request.user)
        if image_form.is_valid():
            image_form.save()
            return HttpResponse("{'status':'success'}", content_type='application/json')

 

 

編寫html

這里需要注意 enctype字段的值

<form class="clearfix" id="jsAvatarForm" enctype="multipart/form-data" autocomplete="off" method="post" action="{% url "users:image_upload" %}" target='frameFile'>
    <label class="changearea" for="avatarUp">
        <span id="avatardiv" class="pic">
            <img width="100" height="100" class="js-img-show" id="avatarShow" src="{{ MEDIA_URL }}{{ request.user.image }}"/>
        </span>
        <span class="fl upload-inp-box" style="margin-left:70px;">
            <span class="button btn-green btn-w100" id="jsAvatarBtn">修改頭像</span>
            <input type="file" name="image" id="avatarUp" class="js-img-up"/>
        </span>
    </label>
    <input type='hidden' name='csrfmiddlewaretoken' value='799Y6iPeEDNSGvrTu3noBrO4MBLv6enY' />
{% csrf_token %}
</form>