使用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作为本地存储图片的地址(这里数据都是存储到本地)

然后在项目文件下的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。然后将取出的数据保存到数据库中，就完成了图片的上传。