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來處理路徑相關的東西。隨便瀏覽個本地圖片並上傳，效果以下：

此時文件已經上傳到了uploads文件夾：

數據圖中的avatar_path也更新了：

此外，咱們還能夠添加上傳文件大小限制，安全限制等更多的功能，在此就不演示了。