flask上传头像功能

上传头像功能只需要以下N步：

首先我们要从HTML中获取头像文件

获取后，传入视图函数

# user.py # 修改用户头像功能 @user_blu.route("/user/avatar", methods=["POST"]) def user_avatar(): # 1.提取新头像 new_avatar = request.files.get("avatar") # 获取用户id user_id = session.get('user_id')

判断新头像是否存在，并添加存放头像的文件夹。 如果不存在就创建文件夹，然后将新头像对旧头像进行替换，再提交到数据库

# user.py # 判断是否接收到新图片 if new_avatar: # 如果存在用Image打开新图片 img = Image.open(new_avatar) # 根据session获取的用户id，从数据库匹配并获取用户 user = db.session.query(User).filter(User.id == user_id).first() # 添加图片路径文件夹 img_path = './static/index/images/user_avatar/' + str(user.id) # 判断图片路径是否存在 user_img = os.path.exists(img_path) # 如果不存在 if not user_img: # 创建该路径文件夹 os.mkdir(img_path) # 将该图片命名并存放到指定路径 img.save(img_path + '/user_imgs.png') # 将该用户的头像路径更改为该图片路径 user.avatar_url = img_path + '/user_imgs.png' # 提交到数据库 db.session.commit() session['avatar_url'] = img_path

确认数据库获取到头像后进行读取

# user.py # 获取用户头像 @user_blu.route("/user/img_path", methods=["GET", "POST"]) def img_path(): # 从session获取用户id user_id = session.get('user_id') # # 根据session获取的用户id，从数据库匹配并获取用户 user = db.session.query(User).filter(User.id == user_id).first() # 如果该用户已上传头像，打开用户头像，读取 if user.avatar_url: with open(user.avatar_url, 'rb') as f: img = f.read() # 如果用户未上传头像信息，返回默认头像 else: with open('./static/index/images/user_pic.png', 'rb') as f: img = f.read() return img

HTML代码

<form class="pic_info"> <h3>头像设置</h3> <div class="form-group"> <label class="label01">当前图像：</label> <img src="/user/img_path" 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>

JavaScript点击事件代码

// user_pic_info.js $(function () { $(".pic_info").submit(function (e) { // 阻止表单默认提交行为 e.preventDefault(); //TODO 上传头像 // 模拟表单的提交 $(this).ajaxSubmit({ url: '/user/avatar', type: 'post', headers: { 'X-CSRFToken': getCookie('csrf_token') }, success: function (resp) { if (resp.errno == '0') { alert(resp.errmsg) // `上传头像`成功 // 获取上传头像的完整的url地址 var avatar_url = resp.avatar_url; // 设置页面上用户头像img的src属性 $(".now_user_pic").attr("src", avatar_url); // 设置父窗口中用户头像img的src属性 $(".user_center_pic>img", parent.document).attr("src", avatar_url); $(".user_login>img", parent.document).attr("src", avatar_url); location.reload() } else { // `上传头像`失败 alert(resp.errmsg); } } }) }) });

测试（点击保存）

python代码写完再完善需要要HTML和js代码码就OK啦，赶紧码起来吧！