javascript - Flask 重定向后自动刷新页面

问题描述

问 题

给自己的网站想做一个更换头像的功能，目前主体思路是这样的
1：上传的图片，放在static文件夹内，以用户名来建文件夹，并以用户名来保存图片
比如，用户名是mike，那我以/static/flask_upload/mike/mike.jpg 为形式，保存图片
当然，图片后缀名我在views里面会进行提取，以便最后保存时候用
每次用户重新上传头像时候，先整个删除mike文件夹，包括里面的图片
再重新保存

2：而上面这个URL，我存放在用户的数据库模型内，可以在渲染页面调用

目前碰到一个问题，用户上传图片以后，图片在文件系统内是更新了
但是页面上不更新，哪怕你重新登录账号也没用
只有你手动刷新页面才会把头像更新掉

感觉是页面上的头像URL还是指向旧的图片，不知道里面的原理是什么
请有经验的筒子指教一下，谢谢。

问题1：现在不知道是否是靠flask和数据库能实现？还是需要借助javascript的方法来操作?

问题2：是否可以在重定向的同时，或者之后，来进行页面的刷新，以保证用户在重定向之后可以马上看到更新后的头像？

路由函数是这样的

@main.route('/upload_file/<username>',methods=['GET','POST'])
def upload_file(username):
    form = UploadForm()
    user = User.query.filter_by(username = username).first()
    if form.validate_on_submit():
        ext=form.upload.data.filename.split('.')[-1]
        filename = '\\'+username+'\\'+username+'.'+ext
        if ext:
            shutil.rmtree(current_app.config['UPLOADED_TEST_DEST']+'\\'+username)
            icon.save(form.upload.data , folder = current_app.config['UPLOADED_TEST_DEST']+'\\'+username+'\\', name = username+'.'+ext)
            url=current_app.config['UPLOADED_FILES_URL']+'\\'+username+'\\'+username+'.'+ext
            user.update_avatar(url)
            return redirect(url_for('.user',username = username, user = user))
    return render_template('upload_file.html',form=form)

user页面的渲染代码是这样的，其中user.avatar就是用户在数据库里面所保存的图片URL位置

{% if user.avatar %}
    <img class="img-rounded profile-thumbnail" src= "{{user.avatar}}" width = "256" height ="256">
{% else %}
    <img class="img-rounded profile-thumbnail" src= "{{user.gravatar(size=256)}}">
{% endif %}

这里可以看到，文件系统内的图片已经更新了，但是我重定向到user页面之后，头像还是没变

解决方案

哈哈，这个问题我也遇到过，因为不是很熟悉前端和HTTP缓存的一些知识，所以折腾了好久。做法就是：

Is there a way to force browsers to refresh/download images?

我还记在 https://github.com/xuelangZF/... 这个 issue 里面。在这个小的练手项目可以看到具体代码的。

这篇关于javascript - Flask 重定向后自动刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！