DAY17 个人中心头像设置
先来说存储文件的两种情形，同文件不同名的存储以及同名不同文件的存储
解决的方法就是指纹，用指纹来识别文件，并通过指纹进行文件的获取
写入指纹并进行获取可以自己搭建服务器来进行或者用第三方平台来进行，这里
我们使用的是第三方七牛云，pip qiniu 可以自己下载并使用，比较方便。
获取文件需要进行拼接地址，写入的指纹和七牛云给的域名
说完之后我们来完成头像的设置，也就上传文件并获取
用户头像的设置
后台代码
首先这是一个新的页面，我们先构建对应视图并将页面渲染出去，要注意页面是否需要
数据进行渲染，是否需要构建对应的上下文，以及设置URL时需要和js中ajax的URL保持一致，和请求方式
get请求渲染页面，post请求接收用户的文件数据并进行修改
还是先分析思路并写注释
第一步：
# 1. 校验用户登录状态
user = g.user
if not user:
return redirect(url_for("index.index"))
当用户没有登录时跳转到主页面
第二步
get请求：
# 2. 根据不同的请求来进行不同的操作
# 2.1 GET 请求
if request.method == "GET":
# 2.1.1 构造上下文
context = {
"user": user.to_dict() if user else None
}
# 2.1.2 页面渲染
return render_template("news/user_pic_info.html", **context)
我们需要将用户的头像传给前端进行渲染，user的to_dict()函数中对文件地址进行了拼接，也就是我们可以从七牛云 中获取到文件
七牛云域名我们在配置表中有，方便进行修改
字典进行的评价，也就是是我们数据库中只保存指纹。
post请求：
# 2.2POST请求
if request.method == "POST":
# 2.2.1接收参数（文件，avatar）
avatar = request.files.get("avatar")
# 2.2.2校验参数
try:
image = avatar.read()
except Exception as e :
current_app.logger.error(e)
return jsonify(errno=RET.PARAMERR,errmsg="参数错误")
# 2.2.3 将图片上传到七牛云中，并获取指纹
try:
key = upload_file(image)
except Exception as e :
current_app.logger.error(e)
return jsonify(errno=RET.THIRDERR,errmsg="图片保存失败")
#2.2.4 更新用户头像信息
user.avatar_url = key
try:
db.session.commit()
except Exception as e :
current_app.logger.error(e)
db.session.rollback()
return jsonify(errno=RET.DBERR,errmsg="保存失败")
data = {
"avatar_url": constants.QINIU_DOMIN_PREFIX +key
}
# 2.2.4返回json数据
return jsonify(errno=RET.OK,errmsg="成功",data = data)
我们需要接收我们文件，request.files.get来接收文件数据，这里校验使用了read，当用户上传了文件，我们
最终接收到的是文件类型，它是可以读，如果不能就说明没有上传或者不是文件类型的文件，所以对参数进行了
是否有值和类型的校验，它是可以接收文本文件的，但是前端不能渲染。read后的数据为文件的二进制格式，
我们进行保存并将它上传到 七牛云
这个文件保存在utils ，也就是我们的工具文件夹。
upload_file 就是将文件上传到七牛云，并将指纹返回，这是第三方的操作记得进行异常捕捉并作出处理
完成后用变量保存并将它存到用户的资料中，也就是对我们查到的用户信息进行修改。
当修改完成之后前端的回调函数需要我们将完整的地址拼接好传给它进行刷新替换，所以我们最后的返回数据需要将完整的地址返回
前端代码：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户中心</title>
<link rel="stylesheet" type="text/css" href="../../static/news/css/reset.css">
<link rel="stylesheet" type="text/css" href="../../static/news/css/main.css">
<script type="text/javascript" src="../../static/news/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../static/news/js/jquery.form.min.js"></script>
<script type="text/javascript" src="../../static/news/js/user_pic_info.js"></script>
</head>
<body class="inframe_body">
<form class="pic_info">
<h3>头像设置</h3>
<div class="form-group">
<label class="label01">当前图像：</label>
<img src="{% if user.avatar_url %}{{ user.avatar_url }}{% else %}../../static/news/images/user_pic.png{% endif %}" alt="用户图片" class="now_user_pic">
</div>
<div class="form-group">
<label>上传图像：</label>
<input type="file" name="avatar" class="input_file">
</div>
<div class="form-group">
<input type="submit" value="保 存" class="input_sub">
</div>
</form>
</body>
</html>
对img标签的src进行了判断，并给出不同展示，当有值时展示字典中拼接好的图片地址，也就是图片。没有值时就展示静态资源中默认的图片，
这样我们前端HTML中所有渲染用户头像的img标签的值都需要进行这样的修改，并且将传的user数据进行字典化，并且判断没有时的传入内容
不然未登录用户获取到的user为NONE,NONE是不能字典化，当user为NON时，我们就不进行字典化，且传NONE给前端，新闻首页和详情页都要修改以及用户中心
js文件
function getCookie(name) {
var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
return r ? r[1] : undefined;
}
$(function () {
$(".pic_info").submit(function (e) {
e.preventDefault();
//TODO 上传头像
$(this).ajaxSubmit({
url: "/user/pic_info",
type: "POST",
headers: {
"X-CSRFToken": getCookie('csrf_token')
},
success: function (resp) {
if (resp.errno == "0") {
$(".now_user_pic").attr("src", resp.data.avatar_url);
$(".user_center_pic>img", parent.document).attr("src", resp.data.avatar_url);
$(".user_login>img", parent.document).attr("src", resp.data.avatar_url)
}else {
alert(resp.errmsg)
}
}
});
});
});
浙公网安备 33010602011771号