接口测试平台-65：番外之个人信息-头像

1. 建立文件夹存储

因为是测试用户，量不大，存本项目内即可。apitest的static下建立一个有__init__的文件夹 user_img

为什么在static，因为这是项目目前可以直接返回给前端的静态资源地址。项目还并没有去settings.py中进行设置自定义的静态资源文件夹。其他目录下的资源文件直接在页面中使用会报错。

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

2. 增加公共参数函数的公共值

views.py：

welcome.html中调用，写好这个换行和img 标签，然后图片路径是拼接的。这里只设置了宽度，并且调用了俩个bootstrap3的样式。

<!--    头像、用户名    -->
<div style="color: white; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; text-align: center">欢迎你：<span>{{ username }}</span><br><img src="/static/user_img/{{ user_img }}" alt="" style="width: 50%" class="img-circle img-thumbnail">
</div>

看看效果：

继续回去完善公共参数函数：毕竟都是写死的，不能所有用户都返回这个1.png，每个用户都有自己的专属头像，这里用户的id 来区分谁是哪张图片。

看看效果：

如果用户id没有图，因此会如下图所示

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

2. 上传

打开welcome.html，增加上传按钮

<!--    头像上传    -->
<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>

注意此处用的是表单上传方式，会自动刷新页面。所有表单内容全部是通过input中的name 标记，后台靠name取。这里只有头像文件一个，就是fileUpload。

2. 添加映射

urls.py：

url(r'^user_upload/$', user_upload),  # 上传头像

views.py：

# 上传用户头像
def user_upload(request):file = request.FILES.get("fileUpload", None)  # 靠name获取上传的文件，如果没有，避免报错，设置成Noneif not file:return HttpResponseRedirect('/home/')  # 如果没有则返回到首页# 设置好这个新图片的名字，为了兼容公共字典写死的pngdestination = open("apitest/static/user_img/" + str(request.user.id) + '.png', 'wb+')  # 打开特定的文件进行二进制的写操作for chunk in file.chunks():  # 分块写入文件destination.write(chunk)destination.close()return HttpResponseRedirect('/home/')  # 返回到首页

重启服务，刷新页面，测试一下，点击上传头像

3. 问题解决

这是csrf_token问题，解决办法，2种。此处的版权：https://blog.csdn.net/weixin_41790552/article/details/100580399

一：django使用

welcome.html：的form增加{% csrf_token %}
views.py：函数前增加注解@csrf_exempt和导入from django.views.decorators.csrf import csrf_exempt

测试一下，看看效果：

注意：

return 使用 render() 而不要用 return render_to_response(‘xxx.html’)，否则会报错：UserWarning: A {% csrf_token %} was used in a template, but the context did not provide the value. This is usually caused by not using RequestContext.
解决：from django.template import RequestContext return render_to_response('xxx.html', locals(),context_instance = RequestContext(request))
render_to_response问题，没使用过，仅供参考，部分版本的Django render_to_response() 没有这个参数

二、ajax解决

ajax请求(post)，需要在data中传入csrfmiddlewaretoken 的值，这个值可以从 cookie 中获取

或者给多个 ajax请求统一配置(这个用法不太确定，实际用了之后也没报错)：

$(function () {
var csrf_token = document.cookie.replace(/(?:(?:^|.*;\s*)csrftoken\s*\=\s*([^;]*).*$)|^.*$/, '$1');
$.ajaxSetup({data: {"csrfmiddlewaretoken": csrf_token}});
});

由于ajax请求中，有的请求使用的是FormData，配合上面的 ajaxSetup，可以单独针对这类请求做以下处理：

var formData = new FormData();

formData.append("csrfmiddlewaretoken", csrf_token);

4. 优化按钮效果

打开welcome.html：把文件按钮组隐藏，并设置好小按钮：

<!--    头像、用户名    -->
<div style="color: white; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; text-align: center">欢迎你：<span>{{ username }}</span><br><img src="/static/user_img/{{ user_img }}" alt="" style="width: 50%" class="img-circle img-thumbnail"><a href="javascript:show_upload()" class="glyphicon glyphicon-pencil"></a>
</div><!--    头像上传    -->
<form id="upload_file" style="display: none" action="/user_upload/" method="post" enctype="multipart/form-data">{% csrf_token %}<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><script>function show_upload() {document.getElementById('upload_file').style.display = 'block';}
</script>

刷新页面看看效果：

发现也可以成哦～而且文件夹内叫2.png的始终是一张哦～那个函数二进制是覆盖的呢，这样不会导致内存被浪费掉。

接口测试平台-65：番外之个人信息-头像相关推荐

接口测试平台-103: 番外-正交工具简介+菜单
1. 正交工具简介: 正交是黑盒测试用例中的一种设计方法,适用于多个输入条件,并且各个条件直接没有逻辑强关联的情况,而每个输入条件又可能有多种状态. 比如,word文档的打印功能:有纸张大小,有单双 ...
接口测试平台-106: 番外-正交工具 excel导出
首先在zhengjiao.html中加入这个导出到excel的按钮. 然后去写对应的js,这个excel函数要做什么呢?其实就是提取页面生成的结果,然后给到后台,后台再写入到excel中,前端再配合 ...
Java微信公众平台开发--番外篇，对GlobalConstants文件的补充
转自:http://www.cuiyongzhi.com/post/63.html 之前发过一个[微信开发]系列性的文章,也引来了不少朋友观看和点评交流,可能我在写文章时有所疏忽,对部分文件给出的不是 ...
从零开始打造云端AI管理调度平台（番外篇_2）视频播放器
本次更新主要更新一个HTML5视频播放器,用于在内容库当中的视频查看以及后续的智能处理结果查看. 视频播放一定要采用流式传输为什么在文章刚开头我就要强调这一点. 因为很多新手小白在创建video标签 ...
番外-三国志14信息查询小程序（历史武将信息一览）制作上线过程
说明:文章中为主要代码小程序码: 1,微信小程序注册及基本框架搭建 10分钟入门 - 微信小程序开发 2,底部tab栏我打算将主要内容分为三部分,武将数据页显示列表数据,剧本与地图页显示一些剧本图 ...
CORS跨域时axios无法获取服务器自定义的header信息 - 番外篇
已解决CORS跨域时axios无法获取服务器自定义的header信息?! 先看代码: // 登录后的表单提交ajaxRegisterApi: function (form) { var key = l ...
【GISER Painter】矢量切片（Vector tile）番外一：Proj4js
转载:https://www.cnblogs.com/escage/p/6406393.html 说明:番外篇是对正篇矢量切片(Vector tile)中提到的一些值得继续延伸的关注点继续进行探索和学 ...
IO多路复用(番外篇)、poll、epoll三者的区别
Python之路,Day9 , IO多路复用(番外篇) 同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案是不同的.所以先限定一下本文的上下文. 本 ...
hg226g 虚拟服务器,华为HG8245H救砖番外篇之利用JTAG完成硬件初始化
原文发在我的bloghttp://blog.csersoft.net/archives/196 前言前几天使用UBoot恢复mtd分区时因为误操作导致flash全部被擦除.这下设备上电时连Start ...

接口测试平台-65：番外之个人信息-头像

接口测试平台-65：番外之个人信息-头像相关推荐

最新文章

热门文章

接口测试平台-65：番外之 个人信息-头像

接口测试平台-65：番外之 个人信息-头像相关推荐

最新文章

热门文章

接口测试平台-65：番外之个人信息-头像

接口测试平台-65：番外之个人信息-头像相关推荐