flask 實現上傳圖片並縮放作爲頭像

個人開發的 flask 論壇進入尾聲,還剩最後一個上傳圖片更換頭像功能,搞了一整天,最後終於解決了所有問題,現在記錄下解決方案。

1. 上傳文件

分析一下更換頭像功能,我們需要做哪些事,簡單的思路是:上傳文件,獲取文件的 url 。

文件上傳的基本原理實際上很簡單,基本上是:

  1. 一個帶有 enctype=multipart/form-data<form> 標記,標記中含有 一個 <input type=file>
  2. 應用通過請求對象的 files 字典來訪問文件。
  3. 使用文件的 save() 方法把文件永久 地保存在文件系統中。

於是可以得到我們的提供上傳按鈕的表單頁面:

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}SYSUfm - 更換頭像{% endblock %}

{% block page_content %}
<div class="page-header">
    <h1>更換你的頭像</h1>
</div>
<div class="col-md-4">
    <form action="" method=post enctype=multipart/form-data>
        <input type=file name=file><br/>
        <input type=submit value=Upload>
    </form>
</div>

{% endblock %}

2. 創建略縮圖

接下來我們需要有路由到這個頁面的視圖函數,服務器後臺端的代碼如下:

@main.route('/edit-avatar', methods=['GET', 'POST'])
@login_required
def change_avatar():
    if request.method == 'POST':
        file = request.files['file']
        size = (40, 40)
        im = Image.open(file)
        im.thumbnail(size)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            im.save(os.path.join(main.static_folder, 'avatar', filename))
            current_user.new_avatar_file = url_for('main.static', filename='%s/%s' % ('avatar', filename))
            current_user.is_avatar_default = False
            flash(u'頭像修改成功')
            return redirect(url_for('.user', username=current_user.username))
    return render_template('change_avatar.html')

這裏 main 是一個 blueprintfile = request.files['file'] 語句獲得圖片文件對象,將其轉換爲 Image 對象,通過 thumbnail 方法進行略縮。

最後 im.save(os.path.join(main.static_folder, 'avatar', filename)) 語句將略縮圖片保存到服務指定路徑。

參考

flask 上傳圖片

創建縮略圖

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章