python - <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.

中, 字名是

u{id}.jpg

. jpg

---

. 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 處理頭像上傳更新顯示

<p 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/*">
</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>