17.上传和修改头像

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

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

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.6/css/fileinput.min.css"/>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.6/js/fileinput.min.js"></script>

上传控件的html代码如下：

<form class="avatar-input-form" method="POST" enctype="multipart/form-data">
    <input name="avatar_upload" type="file" class="file" data-show-preview="false"/>
</form>

我把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:\\Flask\\HarpQA\\static\\"
        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来处理路径相关的东西。随便浏览个本地图片并上传，效果如下：