python - <flask web>的flasky项目的头像问题

问题描述

怎么换成自定义的本地头像呢？ 有没有实现的代码 给个链接看看 谢谢

本地的图片地址：./static/avatar/1.jpg-9.jpg

我的代码是这样的：

def gravatar(self, size=100, default=’identicon’, rating=’g’): import random return ’%d.jpg’ % random.randint(1, 9)

调用是这样的：<img src='https://www.haobala.com/wenda/{{ url_for(’static’, filename=’avatar/’) }}{{ current_user.avatar_hash }}'>

我这样修改后 图片是加载不出来的 为什么呢？

问题解答

欢迎交流, 也在学 Flask, 不过我没用书上 gavatar 的例子, 所以我也不太知道你的问题出在哪里...

关于本地头像, 我这边有个自己写的半成品供参考, 实现了 ajax 异步上传头像到服务器. User 模型里添加了一个 avatar 字段, 存放头像路由相应的 url 路径, 通过访问头像路由得到头像文件. 上传的头像根据用户 id 每 AVATARS_PER_FOLDER 个头像文件存放在 /static/img/avatr/n/ 中, 文件名是 u{id}.jpg.

时间关系我解释的不太详细, 欢迎交流~

backend 蓝图 - app/backend/views.py:

处理头像上传和返回头像

@backend.route('/avatar/<int:id>', methods=['GET', 'POST'])def avatar(id): # 设置头像存储路径 avatar_folder = current_app.config['UPLOAD_FOLDER'] + 'avatar/' # 按照 id 计算头像存储位置 r = id // current_app.config['AVATARS_PER_FOLDER'] save_location = avatar_folder + str(r) # jpg filename = 'u{}.jpg'.format(id) # 处理头像上传 # TODO: CSRF 保护 if request.method == 'POST' and request.is_xhr:# base64 -> imgimg_b64 = request.form.get('img')img_b64 = re.sub(r'data:image/.+;base64,', '', img_b64)img = Image.open(BytesIO(base64.b64decode(img_b64)))# 保存文件if not os.path.exists(save_location): os.mkdir(save_location)img.save(os.path.join(save_location, filename))# 更新数据库u = User.query.get_or_404(id)u.avatar = url_for('backend.avatar', id=id)db.session.add(u)# 返回响应return jsonify(result='success')return send_from_directory(save_location, filename)

html 页面 - app/templates/user_settings.html:

通过 ajax 处理头像上传和更新显示

<p class='settings_avatar'> <a href='https://www.haobala.com/wenda/9710.html#'><img alt='头像' src='https://www.haobala.com/wenda/{{ current_user.avatar }}'> </a> <input type='file' accept='image/*'></p>

这里使用 localResizeIMG 插件来压缩图像, 得到图像的 base64 编码, 传入 upload_avatar() 函数异步上传, 如果上传成功, 更新头像显示

<script> $(function() {var URL_ROOT = {{ request.url_root | tojson | safe }};var id = {{ current_user.id }} $('#upload_avatar').on('change', function() { // 使用了 lrz(this.files[0]) .then(function (rst)upload_avatar(URL_ROOT, id, rst); }) .catch(function (err) {alert(err); }) .always(function () {});}) }) function upload_avatar(URL_ROOT, id, rst) {r = 'backend/avatar/' + id;$.post( URL_ROOT+r, {img: rst.base64, }, function(data) {if (data.result === 'success') { $('.settings_avatar .avatar .img-circle').attr('src', rst.base64);} }) }</script>