接口测试平台代码实现-番外: 个人信息展示-2好的，继续。我们开始设计这个头像。首先，我们要知道，头像图片这是一个文

好的，继续。我们开始设计这个头像。

首先，我们要知道，头像图片这是一个文件，这本身没法存放于数据库中。我们的数据库顶多就是存放这个图片的文件名而已，那么这些图片放在哪呢？

我们肯定要创建一个文件夹，用来存放。如果用户量达到几百万甚至更多，那么一般的电脑怕是放不下了，所以就有了专门的服务器，也就是我们公司内常说的图片服务器。图片服务器的存量和其专用的宽带费用几乎是目前互联网公司最大的成本之一。

不过我们的平台没有那么多用户，所以头像也存不了多少，作者的各平台的用户加一起在公司员工中也才几百。

所以我们现在开始正式实现这个功能，注意此处步骤必须记牢，可以收藏哦～

首先我们在项目内MyApp下的static下建立一个有__init__的文件夹 user_img

至于为什么要在static下，因为这是项目目前可以直接返回给前端的静态资源地址。我们还并没有去settings.py中进行设置自定义的静态资源文件夹。

其他目录下的资源文件，我们直接在页面中使用会报错。

我们现在先随便去哪弄个小图片放进来，先实现展示效果～

然后我们去views.py中找到上节创建的公共参数函数：

如上图，添加了一个userimg，值为刚刚的图片名称带后缀。

然后去welcome.html中写好调用显示,

写好这个换行和img 标签，然后图片路径是拼接的。

关于图片的大小宽带长度比例大家可以自己随意设置一下。我这里只设置了宽度,并且调用了俩个bootstrap3的样式。

看看效果：

显示的效果大家可以自己再玩一下。我们继续回去完善公共参数函数：

毕竟我们之前都是写死的。不能所有用户都返回这个1.png吧。每个用户都有自己的专属/

我们这里用户的id 来区分谁是哪张图片。

现在的情况是，我的用户id不是1，而这个图片名称为1.png，所以我们找不到，前端显示如此：

我这里暂时不做这个优化了。虽然看着难看，但这属于产品的思维，就是让用户觉得难看，然后好上传头像～

我们现在就去开发上传头像功能：

先在前端写好上传的按钮：

注意，因为这个原生的上传按钮组不太好控制，所以我已经写好了细节的修改。位置放在nav内，div下。注意此处用的是表单上传方式，会自动刷新页面。所有表单内容全部是通过input中的name 标记，后台靠name取。这里只有头像文件一个，就是fileUpload。

大家可以直接复制下面代码，以防出错。

 <form id="upload_file" action="/user_upload/" method="post" enctype="multipart/form-data">    <input type="file" name="fileUpload" style="margin-left: 45px;width: 65px;height: 20px;font-size: xx-small;float: left"/>    <button onclick="upload_py()"  style="color: black;width: 64px;height: 21px;font-size: xx-small" > 上传头像 </button></form>

效果如下：

好的，我们的路由设置为/user_upload/ 那么现在去urls.py中进行设置：

然后去后台新建 user_upload函数：

# 上传用户头像
def user_upload(request):
    file = request.FILES.get("fileUpload",None) # 靠name获取上传的文件，如果没有，避免报错，设置成None

    if not file:
        return HttpResponseRedirect('/home/') #如果没有则返回到首页

    new_name = str(request.user.id) + '.png' #设置好这个新图片的名字
    destination = open("MyApp/static/user_img/"+new_name, 'wb+')  # 打开特定的文件进行二进制的写操作
    for chunk in file.chunks():  # 分块写入文件
        destination.write(chunk)
    destination.close()

    return HttpResponseRedirect('/home/') #返回到首页