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

Question

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

本地的图片地址：./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 class="img-rounded profile-thumbnail" src="{{ url_for('static', filename='avatar/') }}{{ current_user.avatar_hash }}">

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

Answer 1

欢迎交流, 也在学 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 -> img
        img_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 处理头像上传和更新显示

<div class="settings_avatar">
    <a class="avatar" href="#">
        <img alt="头像" class="img-circle" src="{{ current_user.avatar }}">
    </a>
    <input id="upload_avatar" type="file" accept="image/*">
</div>

这里使用 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>