17.上传和修改头像

Shisui 发布于2019-07-30 15:30 / 3275人阅读

摘要：上传文件，需要使用到的控件，其为。提供了一个美观且功能强大上传控件，样式如下它提供文件的预览，并且自带和按钮。此时修改头像的页面是这样的，我们先完成功能，后续再美化。修改视图函数，如下这里用了库的来处理路径相关的东西。

上传文件，需要使用到html的input控件，其type为file。Boostrap提供了一个美观且功能强大上传控件，样式如下：

它提供文件的预览，并且自带remove和upload按钮。要使用这个控件，需要再额外引入相应的js和css文件，如下：

上传控件的html代码如下：

我把data-show-preview设置为false，关闭了上传文件的预览，更多关于这个控件的内容可以自行搜索。

此时修改头像的页面是这样的，我们先完成功能，后续再美化。

那么如何获取上传的文件呢，与获取POST数据类似（上传文件其实也是使用POST方法），在flask中使用request.files[name]获取上传的文件，其中name为对应input控件的name值（name="avatar_upload"），然后使用文件的save方法即可保存。例如:

@app.route("/user/avatar/", methods=["GET", "POST"])
def avatar():
    if request.method == "GET":
        return render_template("avatar.html")
    else:
        file = request.files["avatar_upload"]
        path = "D:FlaskHarpQAstatic"
        file.save(path + file.filename)
        return "Saved"

注意save方法要加上具体的路径，默认不会保存到py文件所在的路径，而是系统的根目录，此时会提示Permission denied。我们接下来要把上传的文件设置为用户的新头像，其实可以直接将user的avatar_path修改为上传文件的路径，这样整个功能就完成了，但为了规范，我们建立一个文件夹专门存放头像文件（static/images/uploads），并且以用户id来命名文件，这样就避免出现文件名重复导致被覆盖。修改视图函数，如下：

@app.route("/user/avatar/", methods=["GET", "POST"])
def avatar():
    if request.method == "POST":
        file = request.files["avatar_upload"]
        base_path = path.abspath(path.dirname(__file__))
        filename = str(g.user.id) + "." + file.filename.rsplit(".", 1)[1]
        file_path = path.join(base_path, "static", "images", "uploads", filename)
        file.save(file_path)
        g.user.avatar_path = "images/uploads/" + filename
        db.session.commit()
    return render_template("avatar.html")

这里用了os库的path来处理路径相关的东西。随便浏览个本地图片并上传，效果如下：

此时文件已经上传到了uploads文件夹：

数据图中的avatar_path也更新了：

此外，我们还可以添加上传文件大小限制，安全限制等更多的功能，在此就不演示了。

GPU云服务器云服务器修改头像上传头像代码头像上传实例 php头像上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/41294.html

移动端cropper.js 裁剪图片并上传

摘要：参考效果引入使用结构头像头像截图弹窗取消截图头像保存引用具体使用可查看官网修改头像参加文件点击图片初始化关闭弹窗保存截图保存数据参考效果：http://www.17sucai.com/previe... 引入cropper使用 HTML结构头像 ...

since1986 2019-08-23 11:34 评论0 收藏0
移动端cropper.js 裁剪图片并上传

摘要：参考效果引入使用结构头像头像截图弹窗取消截图头像保存引用具体使用可查看官网修改头像参加文件点击图片初始化关闭弹窗保存截图保存数据参考效果：http://www.17sucai.com/previe... 引入cropper使用 HTML结构头像 ...

马龙驹 2019-08-02 11:23 评论0 收藏0
Django搭建个人博客：上传头像图片

摘要：到目前为止我们的博客处理的都是文字。比如说图片上传是年月日，则图片会保存在中。添加标签用于上传图片。除了上传，图片的处理还包括验证格式改变尺寸更名裁剪美化等多种多样的需求。如果上传的图片重名，会导致报错吗请试试看。到目前为止我们的博客处理的都是文字。现代互联网早就进入了读图时代，图片的维护、展示也就相当重要。上一章中预留了avatar字段，用来保存用户上传的头像，现在我们来实现这个...

summerpxy 2019-07-30 18:37 评论0 收藏0
TP5整合阿里云OSS上传文件第二节,异步上传头像实现,

摘要：版本也是我最喜欢的方式这个代码有点黏在一起了凑合看把李昊天创建实例服务器异步接受地址指定选择文件的按钮容器禁止多选不压缩选择之后自动上传防止低版本浏览器用到了只允许选择图片文件。 TP5整合阿里云OSS上传文件第二节,上传头像实现首先先看一个效果图上传失败效果图:showImg(https://segmentfault.com/img/bVbaJLZ?w=983&h=561);上传成功...

douzifly 2019-08-22 17:19 评论0 收藏0