Django上传图像功能

一 修改数据模型mysite/account/models.py

class UserInfo(models.Model):
    user = models.OneToOneField(User, unique=True)
    school = models.CharField(max_length=97, blank=True)
    company = models.CharField(max_length=97, blank=True)
    profession = models.CharField(max_length=27, blank=True)
    address = models.CharField(max_length=177, blank=True)
    # TextField对应HTML中的Textarea，blank为True表示可以为空
    aboutme = models.TextField(blank=True)
    # 增加图像属性
    photo = models.ImageField(blank=True)

二 安装Pillow，安装后的效果

三 迁移数据库

(venv) E:\Django\mysite\mysite>python manage.py makemigrations
(venv) E:\Django\mysite\mysite>python manage.py migrate

四 查看数据库是否生效

五 修改mysite/account/forms.py

class UserInfoForm(forms.ModelForm):
    class Meta:
        model = UserInfo
        # 增加photo字段
        fields = ("school", "company", "profession", "address", "aboutme","photo")

六 重构视图函数my_image

@login_required(login_url='/account/login/')
def my_image(request):
    if request.method == 'POST':
        # 得到前端以POST方式提交的图片信息
        img = request.POST['img']
        userinfo = UserInfo.objects.get(user=request.user.id)
        userinfo.photo = img
        userinfo.save()
        return HttpResponse("1")
    else:
        return render(request, 'account/imagecrop.html',)

七 编辑mysite/templates/account/imagecrop.html，使用Adjx技术上传图像

{% load staticfiles %}


  

    

    

  
  

    
    
 
      请先选择图片...
      
      
    
    
    
    
  
  

八 优化mysite/templates/account/myself.html，显示图像信息

{% extends "base.html" %}

{% block title %}我的信息{% endblock %}

{% block content %}

    
我的信息
    

        

            

                
用户名:
                
{{user.username}}
            
            

                
邮箱:
                
{{user.email}}
            
            

                
生日:
                
{{userprofile.birth}}
            
            

                
电话:
                
{{userprofile.phone}}
            
            

                
毕业学校:
                
{{userinfo.school}}
            
            

                
工作单位:
                
{{userinfo.company}}
            
            

                
职业:
                
{{userinfo.profession}}
            
            

                
地址:
                
{{userinfo.address}}
            
            

                
个人介绍:
                
{{userinfo.aboutme}}
            
            

                
                    编辑我的信息
                
            
        
        

            {% load staticfiles %}
            

                {% if userinfo.photo %}
                
                
                {% else %}
                
                {% endif %}

                

                    upload my
                        photo
                    
                
            

    





{% endblock %}

九测试

1 登录后，浏览器输入http://localhost:8000/account/my-image/

2 点击OK