使用django在前台(用户)上传图片及显示

使用django在前台(用户)上传图片及显示

在用django自己写了一个小网站后,在设计用户中心的时候,需要用到用户的头像上传修改,所以查了很多资料以后,写下这么一篇文章来记录,以后用到方便直接查看。(只记录大体过程)

1.数据库表字段设计

<!--upload_to方法获取image路径,方法内置了strftime(),能解析 %格式化日期-->
image=models.ImageField(upload_to='use_image/%Y/%m',default='image/default.png',
max_length=100,verbose_name='头像',blank=True,null=True)

我这里设计的是用户中心表,添加一个image的字段,设置上传的静态路径(这里用的是django自带的up_load属性),设置默认值,最大值。

2.配置静态上传url问题

首先在项目同级目录下新建一个media的python package作为本地存储图片的地址(这里数据都是存储到本地)

Alt text

然后在项目文件下的setting中做如下设置:

MEDIA_URL = '/media/'#定义静态上传文件的根地址
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')#将根地址加入到项目目录下/设置启动地址

定义一个MEDIA_URL为静态地址头,后面再取静态图片的时候会用到。然后 MEDIA_ROOT设置,这是重点,因为这个是你项目在需要用到静态图片/文件的时候,会去查找的路径地址,将 ‘media’ 加入到项目路径下,这样才能使你上传的静态文件被找到。

3.前端图片上传的实现

    <iframe id='frameFile' name='frameFile' style='display: none;'></iframe>
    <form class="clearfix" id="jsAvatarForm" enctype="multipart/form-data" autocomplete="off"
          method="post" action="{% url 'index:user_image' %}" target='frameFile'>
        {#                        action="/users/image/upload/"#}
        <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>

在前端设计过程中,有几个重点需要注意
- enctype=”multipart/form-data”,设置格式固定,在表单行间设置了这个属性,文件上传就是以2进制上传了,这样就能实现多类型格式的文件上传,在没有设置这个属性的时候,只能上传文本格式的文件。
- 需要在html文件中定义一个便签,类型为file,名字为image,方便后台接受这个图片。
- 在接受显示图片的时候,使用的是django模板自带的双{}取值方法,但是在具体的路径前面需要加上{{MEDIA_URL}}这样完整的路劲就是 ‘/media/’加上指定静态路径了。MEDIA_URL在setting中已经设置好了。

4.定义一个form表单,接受并验证前台传过来的图片

一般而言,在django中,前端的数据块会定义在一个表单内,由前台提交这个表单,然后后台用一个form表单接受,表单内可以做相应的验证判断,这里用的是modelform的方法定义表单,验证上传过来的图片是否满足userprofile中的image字段要求。

from  django import forms
class ImageUploadForm(forms.ModelForm):
    class Meta:
        model=UserProfile
        fields=['image']

5.定义一个图片上传的View视图

这里我用的是视图类的方法创建视图,这个视图用于对验证表单于保存数据到库,以及将数据渲染到前端模板。

#--------------------------------修改头像提交-----------------------------------
class UserImageView(View):
    def post(self,request):
        #创建一个表单对象
        image_form=ImageUploadForm(request.POST,request.FILES)
        # image=request.POST.get('image','')
        if image_form.is_valid():
            image=image_form.cleaned_data['image']
            request.user.image=image
            request.user.save()
            return render(request,'usercenter-info.html')

首先实例化一个表单,通过表单的is_valid()方法验证数据是否有效,如果通过验证,就将图片取出保存,值得注意的是,在django中的表单中有一个cleaned_data的属性,这个属性里面的值的类型跟你上传的数据的定义字段类型相同。而在本例中,他就是一个dict,通过key取值得到image的value。然后将取出的数据保存到数据库中,就完成了图片的上传。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页