首先我们要实现以下的效果
1、我们先把前端文件移到templates中
移动去后我们会发现找不到页面了，其实和之前基本设置中一样，导致的原因就是因为我们把前端文件移动走了，html内容却没有修改
将user的前端文件中头像设置中a标签用url_for直接指向我们的pic_info 视图函数就可以了
先把前端的代码放上来
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用户中心</title> 6 <link rel="stylesheet" type="text/css" href="../../static/news/css/reset.css"> 7 <link rel="stylesheet" type="text/css" href="../../static/news/css/main.css"> 8 <script type="text/javascript" src="../../static/news/js/jquery-1.12.4.min.js"></script> 9 <script type="text/javascript" src="../../static/news/js/jquery.form.min.js"></script> 10 <script type="text/javascript" src="../../static/news/js/user_pic_info.js"></script> 11 </head> 12 <body class="inframe_body"> 13 <form class="pic_info"> 14 <h3>头像设置</h3> 15 <div class="form-group"> 16 <label class="label01">当前图像：</label> 17 <img src="{% if context.user.avatar_url %}{{ context.user.avatar_url }}{% else %}../../static/news/images/user_pic.png{% endif %}" class="lgin_pic"> 18 </div> 19 <div class="form-group"> 20 <label>上传图像：</label> 21 <input type="file" name="avatar" class="input_file"> 22 </div> 23 24 <div class="form-group"> 25 <input type="submit" value="保 存" class="input_sub"> 26 </div> 27 </form> 28 </body> 29 </html>
2、因为有头像存储的步骤，所以这里我们有两种选择
2.1自己搭建一个服务器来存储（一般大公司会自己搭建）
2.2使用第三方平台（个人以及小公司）
这里不用说了我们肯定使用第三方平台，这里我们使用的是七牛云平台（第三方平台博客中介绍使用）
我们现在第三方文件中创建七牛的文件file_storage.py
以下是七牛云的代码
1 # 专门处理文件上传存储的 2 import qiniu 3 4 5 access_key = '' 6 secret_key = '' 7 bucket_name = '' 8 9 10 def upload_file(data): 11 """ 12 上传文件到七牛云 13 :param data: 要上传的文件的二进制 14 """ 15 q = qiniu.Auth(access_key, secret_key) 16 token = q.upload_token(bucket_name) 17 ret, info = qiniu.put_data(token, None, data) 18 19 print(ret['key']) 20 21 if info.status_code != 200: 22 raise Exception('七牛上传失败') 23 24 return ret['key'] 25 26 # 27 # if __name__ == '__main__': 28 # 29 # path = '/Users/zhangjie/Desktop/Images/timg.jpeg' 30 # with open(path, 'rb') as file: 31 # upload_file(file.read())
3、然后是后端的代码
1 @user_blue.route("/pic_info",methods = ["POST","GET"]) 2 @user_login_data 3 def pic_info(): 4 user = g.user 5 # 接收用户信息同时判断是否登录 6 if not user: 7 return redirect(url_for('index.index')) 8 # 当需要提交数据的时候 9 if request.method == "POST": 10 # 接收参数 11 avatar_file = request.files.get("avatar") 12 try: 13 #用read()函数读取判断文件中是否有内容 14 avatar_data = avatar_file.read() 15 except Exception as e: 16 #日志记录 17 current_app.logger.error(e) 18 return jsonify(errno=RET.PARAMERR, errmsg="参数错误") 19 20 try: 21 #用key变量接收上传完七牛云返回的指纹 22 key = upload_file(avatar_data) 23 except Exception as e: 24 current_app.logger.error(e) 25 return jsonify(errno=RET.THIRDERR, errmsg="七牛云存储错误") 26 #上传到数据库 27 user.avatar_url = key 28 29 try: 30 #数据库提交 31 db.session.commit() 32 except Exception as e: 33 current_app.logger.error(e) 34 return jsonify(errno=RET.DATAERR, errmsg="数据库上传失败") 35 #将上传完毕的key变量通过拼接七牛云的空间管理的域名用avatar_url作为键传给前端的js 36 #用于实时修改头像 37 data = { 38 "avatar_url":constants.QINIU_DOMIN_PREFIX + key 39 } 40 #返回结果 41 return jsonify(errno=RET.OK, errmsg="上传成功",data=data) 42 #传递上下文 43 context = { 44 "user":user.to_dict() if user else None 45 } 46 return render_template("news/user_pic_info.html",context=context)