flask-uploads擴展的使用筆記

涉及的flask擴展

flask-uploads	flask的一個文件上傳擴展, 提供了UploadSet這個概念
flask-wtf(中文)	很強大的表單的擴展
flask-bootstrap	bootstrap的flask擴展, 結合模版使用, 此處用到quick_form功能

 

from flask import Flask, render_template
from flask_uploads import UploadSet, IMAGES, configure_uploads
from flask_wtf import Form
from wtforms import SubmitField
from flask_wtf.file import FileField, FileAllowed, FileRequired
from flask_bootstrap import Bootstrap

app = Flask(__name__)

# 新建一個set用於設置文件類型、過濾等
set_mypic = UploadSet('mypic')  # mypic

# 用於wtf.quick_form()模版渲染
bootstrap = Bootstrap(app)

# mypic 的存儲位置,
# UPLOADED_xxxxx_DEST, xxxxx部分就是定義的set的名稱, mypi, 下同
app.config['UPLOADED_MYPIC_DEST'] = './static/img'

# mypic 允許存儲的類型, IMAGES為預設的 tuple('jpg jpe jpeg png gif svg bmp'.split())
app.config['UPLOADED_MYPIC_ALLOW'] = IMAGES

# 把剛剛app設置的config注冊到set_mypic
configure_uploads(app, set_mypic)

app.config['SECRET_KEY'] = 'xxxxx'

# 此處WTF的SCRF密碼默認為和flask的SECRET_KEY一樣
# app.config['WTF_CSRF_SECRET_KEY'] = 'wtf csrf secret key'


class UploadForm(Form):
    '''
        一個簡單的上傳表單
    '''

    # 文件field設置為‘必須的’，過濾規則設置為‘set_mypic’
    upload = FileField('image', validators=[
                       FileRequired(), FileAllowed(set_mypic, 'you can upload images only!')])
    submit = SubmitField('ok')


@app.route('/', methods=('GET', 'POST'))
def index():
    form = UploadForm()
    url = None
    if form.validate_on_submit():
        filename = form.upload.data.filename
        url = set_mypic.save(form.upload.data, name=filename)
    return render_template('index.html', form=form, url=url)


if __name__ == '__main__':
    app.run(debug=True)

 html文件:

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

{% block page_content %}
    <h4>uploaded: {% if url %} {{url}}{% endif %}</h4>
    {{ wtf.quick_form(form, enctype="multipart/form-data") }} 
{% endblock page_content %}