第17天个人中心头像设置。

我们来说一下存储文件的两种情况，即存储不同名称的文件和存储不同名称的文件。

解决方案是指纹，用于识别文件，通过指纹获取文件。

写指纹和获取指纹可以通过自己搭建服务器或者使用第三方平台来完成。在这里，

我们用的是第三方奇牛云，pip奇牛可以自己下载使用，比较方便。

获取齐牛云给出的需要拼接的文件地址、需要书写的指纹、域名。

之后，我们将完成头像的设置，并上传文件并获得它。

用户头像的设置

后台代码

首先，这是新的一页。首先，我们构建相应的视图并渲染页面，并注意页面是否需要。

在渲染数据时，是否需要构建对应的上下文，在设置URL时，需要与js中的ajax URL一致，请求方式一致。

获取呈现页面的请求，并发布接收和修改用户文件数据的请求。

或者先分析思路写评论。

第一步：

# 1.验证用户登录状态。

用户=g.user

如果不是用户：

返回重定向(url_for(‘index.index ‘)

当用户未登录时，跳转到主页。

第二步

get请求：

# 2.根据不同的要求执行不同的操作。

# 2.1 GET请求。

if request.method==’GET’:

# 2.1.1施工背景。

上下文={ 0

用户’ : user.to_dict()，如果用户无其他

}

# 2.1.2页面渲染。

返回render _ template(‘ news/user _ pic _ info . html ‘，**context)

我们需要将用户的头像发送到前端进行渲染，在用户的to_dict()函数中拼接文件地址，也就是可以从齐牛云那里得到文件。

七牛云域名我们在配置表中有，方便修改。

字典做出的评估意味着只有指纹存储在我们的数据库中。

post请求：

# 2.2POST请求。

if request.method==’POST’:

# 2.2.1接收参数(文件、头像)。

avatar=request . files . get(‘ avatar ‘)

# 2.2.2检查参数。

尝试：

image=avatar.read()

e :除外

current_app.logger.error(e)

返回jsonify (errno=ret。paramerr，errmsg=’参数错误’)。

# 2.2.3上传图片到七牛云获取指纹。

尝试：

key=upload_file(图像)

e :除外

current_app.logger.error(e)

返回jsonify (errno=ret。thirderrr，errmsg=’图片保存失败’)。

#2.2.4更新用户头像信息。

user.avatar_url=key

尝试：

db.session.commit()

e :除外

current_app.logger.error(e)

db.session.rollback()

返回jsonify (errno=ret.dberr，errmsg=’ save failed ‘)。

数据={ 0

avatar_url’:常量。QINIU_DOMIN_PREFIX键

}

# 2.2.4返回json数据。

br> 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 %}" 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_picimg", parent.document).attr("src", resp.data.avatar_url);
                    $(".user_loginimg", parent.document).attr("src", resp.data.avatar_url)
                }else {
                    alert(resp.errmsg)
                }
            }
        });
    });
});