python - Problème d'avatar du projet Flasky de <flask web>

Question

Comment passer à un avatar local personnalisé ? Y a-t-il un code implémenté ? Veuillez me donner un lien. Merci

.

Adresse locale de l'image : ./static/avatar/1.jpg-9.jpg

Mon code est comme ceci :

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

L'appel est comme ceci :
<img class="img-rounded profile-thumbnail" src="{{ url_for('static', filename='avatar/') }}{{ current_user.avatar_hash }}"> ;

L'image ne peut pas être chargée après l'avoir modifiée comme ça. Pourquoi ?

Answer 1

Bienvenue pour communiquer, j'apprends aussi Flask, mais je n'ai pas utilisé l'exemple gavatar dans le livre, donc je ne sais pas où se situe votre problème...

Concernant les avatars locaux, j'ai un produit semi-fini écrit par moi-même pour référence, qui implémente le téléchargement asynchrone ajax des avatars sur le serveur User 模型里添加了一个 avatar 字段, 存放头像路由相应的 url 路径, 通过访问头像路由得到头像文件. 上传的头像根据用户 id 每 AVATARS_PER_FOLDER 个头像文件存放在 /static/img/avatr/n/ 中, 文件名是 u{id}.jpg.

Je ne peux pas l'expliquer en détail en raison de contraintes de temps, bienvenue pour communiquer~

---

plan backend -

 : app/backend/views.py

Gérer le téléchargement et le retour de l'avatar

@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)

page html -

 : app/templates/user_settings.html

Gérer le téléchargement d'avatar et l'affichage de mise à jour via 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>

Le plug-in localResizeIMG est utilisé ici pour compresser l'image, obtenir l'encodage base64 de l'image et transmettre la fonction

pour télécharger de manière asynchrone. Si le téléchargement réussit, l'affichage de l'avatar est mis à jourupload_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>