Web 應(yīng)用程序的一個(gè)常見特性是允許用戶將文件上傳到服務(wù)器缠犀。在 RFC 1867 中協(xié)議記錄了客戶端上傳文件的機(jī)制骂删，我們最喜歡的 Web 框架 Flask 完全支持這一機(jī)制画拾，但是對(duì)于許多開發(fā)者來說，還有許多實(shí)現(xiàn)細(xì)節(jié)未遵循該正式規(guī)范塞淹。諸如在何處存儲(chǔ)上傳的文件，如何事后使用它們梗肝，或者如何保護(hù)服務(wù)器不受惡意文件上傳的影響姐叁，這些都會(huì)產(chǎn)生很多混亂和不確定性。
在本文中延柠，我將向你展示如何為 Flask 服務(wù)器實(shí)現(xiàn)強(qiáng)大的文件上傳功能，該功能不僅支持基于 Web 瀏覽器中的標(biāo)準(zhǔn)文件上傳并且與基于 JavaScript 的上傳小部件兼容：
基本文件上傳表單
從高層次的角度來看，上傳文件的客戶端與其他任何表單數(shù)據(jù)提交一樣箕肃。 換句話說处窥，你必須定義一個(gè)包含文件字段的 HTML 表單。
下面是一個(gè)簡單的 HTML 頁面增热，該表單接受一個(gè)文件:
<!doctype html>
<html>
<head>
<title>File Upload</title>
</head>
<body>
<h1>File Upload</h1>
<form method="POST" action="" enctype="multipart/form-data">
<p><input type="file" name="file"></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
你可能知道整以，
<form> 元素的 method 屬性可以是 GET 或 POST。使用 GET 時(shí)峻仇，數(shù)據(jù)將在請(qǐng)求 URL 的查詢字符串中提交公黑，而使用 POST 時(shí)，數(shù)據(jù)將進(jìn)入請(qǐng)求主體摄咆。在表單中包含文件時(shí)凡蚜，必須使用 POST，因?yàn)椴豢赡茉诓樵冏址刑峤晃募?shù)據(jù)吭从。
沒有文件的表單通常不包含 <form> 元素中的 enctype 屬性朝蜘。此屬性定義瀏覽器在將數(shù)據(jù)提交到服務(wù)器之前應(yīng)該如何格式化數(shù)據(jù)。HTML 規(guī)范為其定義了三個(gè)可能的值：
-
application/x-www-form-urlencoded:
這是默認(rèn)格式影锈，也是不包含文件字段的表單的最佳格式
-
multipart/form-data:
如果表單中至少有一個(gè)字段是文件字段芹务，則需要此格式
-
text/plain:
這種格式?jīng)]有實(shí)際用途蝉绷，所以你應(yīng)該忽略它
實(shí)際的文件字段是我們用于大多數(shù)其他表單字段的標(biāo)準(zhǔn) <input> 元素，其類型設(shè)置為 file枣抱。 在上面的示例中熔吗，我沒有包含任何其他屬性，但是file字段支持兩個(gè)有時(shí)有用的屬性：
-
multiple:
可用于允許在單個(gè)文件字段中上載多個(gè)文件佳晶。例如:
<input type="file" name="file" multiple>
-
accept:
可以用于篩選允許的文件類型桅狠，這些文件類型可以通過文件擴(kuò)展名或媒體類型選擇。例子:
<input type="file" name="doc_file" accept=".doc,.docx">
<input type="file" name="image_file" accept="image/*">
使用 Flask 接受文件提交
對(duì)于常規(guī)表單轿秧，F(xiàn)lask 提供了對(duì) request.form 字典中提交的表單字段的訪問中跌。 但是，文件字段包含在request.files 字典中菇篡。 request.form 和 request.files 字典實(shí)際上是“multi-dicts”漩符，它是一種支持重復(fù)鍵的專門字典實(shí)現(xiàn)。 這是必要的驱还，因?yàn)楸韱慰梢园鄠€(gè)具有相同名稱的字段嗜暴，通常情況下是由多組復(fù)選框組成。 對(duì)于允許多個(gè)文件的文件字段议蟆，也會(huì)發(fā)生這種情況闷沥。
暫時(shí)忽略諸如驗(yàn)證和安全性等重要方面，下面簡短的 Flask 應(yīng)用程序接受使用上一節(jié)中定義的表單上傳的文件咐容，并將提交的文件寫入當(dāng)前目錄：
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/', methods=['POST'])
def upload_file():
uploaded_file = request.files['file']
if uploaded_file.filename != '':
uploaded_file.save(uploaded_file.filename)
return redirect(url_for('index'))
upload_file() 函數(shù)使用@app.route裝飾舆逃，以便在瀏覽器發(fā)送POST請(qǐng)求時(shí)調(diào)用該函數(shù)。 請(qǐng)注意戳粒，同一個(gè)根 URL 是如何在兩個(gè)視圖函數(shù)之間進(jìn)行拆分的路狮，并將 index() 設(shè)置為接受 GET 請(qǐng)求，將 upload_file``() 上傳為 POST 請(qǐng)求享郊。
uploaded_file 變量保存提交的文件對(duì)象览祖。 這是 Flask 從 Werkzeug 導(dǎo)入的 FileStorage 類的實(shí)例。
FileStorage 中的 filename 屬性提供客戶端提交的文件名炊琉。如果用戶提交表單時(shí)沒有在 file 字段中選擇文件展蒂，那么文件名將是一個(gè)空字符串，因此始終檢查文件名以確定文件是否可用是很重要的苔咪。
Flask 收到文件提交后锰悼，不會(huì)自動(dòng)將其寫入磁盤。 這實(shí)際上是一件好事团赏，因?yàn)樗箲?yīng)用程序有機(jī)會(huì)查看和驗(yàn)證文件提交箕般，這一點(diǎn)將在后面看到。 可以從 stream 屬性訪問實(shí)際文件數(shù)據(jù)舔清。 如果應(yīng)用程序只想將文件保存到磁盤丝里，則可以調(diào)用 save() 方法曲初，并將所需路徑作為參數(shù)傳遞。 如果未調(diào)用文件的 save() 方法杯聚，則該文件將被丟棄臼婆。
是否要使用此應(yīng)用程序測試文件上傳？ 為你的應(yīng)用程序創(chuàng)建目錄幌绍，并將上面的代碼編寫為 app.py颁褂。 然后創(chuàng)建一個(gè)模板子目錄，并將上一節(jié)中的HTML頁面編寫為templates/index.html傀广。 創(chuàng)建一個(gè)虛擬環(huán)境并在其上安裝Flask颁独，然后使用 flask run 運(yùn)行該應(yīng)用程序。 每次提交文件時(shí)伪冰，服務(wù)器都會(huì)把它的副本寫到當(dāng)前目錄中誓酒。
在繼續(xù)討論安全性主題之前，我將討論上面的代碼的一些變體贮聂，你可能會(huì)發(fā)現(xiàn)這些變體很有用丰捷。 如前所述，可以將文件上傳字段配置為接受多個(gè)文件寂汇。 如果像上面那樣使用 request.files['file']，則只會(huì)得到一個(gè)提交的文件捣染，但是使用 getlist() 方法骄瓣，你可以在for循環(huán)中訪問所有文件：
for uploaded_file in request.files.getlist('file'):
if uploaded_file.filename != '':
uploaded_file.save(uploaded_file.filename)
許多人在 Flask 中編寫表單處理路由時(shí)，對(duì) GET 和 POST 請(qǐng)求使用單個(gè)視圖函數(shù)耍攘。使用單視圖函數(shù)的示例應(yīng)用程序的版本編碼如下:
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
uploaded_file = request.files['file']
if uploaded_file.filename != '':
uploaded_file.save(uploaded_file.filename)
return redirect(url_for('index'))
return render_template('index.html')
最后榕栏，如果使用 Flask-WTF 擴(kuò)展來處理表單，則可以使用 FileField 對(duì)象上傳文件蕾各。到目前為止扒磁，你看到的例子中使用的表單可以使用 Flask-WTF 編寫如下:
from flask_wtf import FlaskForm
from flask_wtf.file import FileField
from wtforms import SubmitField
class MyForm(FlaskForm):
file = FileField('File')
submit = SubmitField('Submit')
注意，FileField 對(duì)象來自 flask_wtf 包式曲，與大多數(shù)其他字段類不同妨托，后者直接從 wtforms 包導(dǎo)入。Flask-WTF 為文件字段提供了兩個(gè)驗(yàn)證器吝羞，F(xiàn)ileRequired 和 FileAllowed兰伤，前者執(zhí)行類似于空字符串檢查的檢查，后者確保文件擴(kuò)展名包含在允許的擴(kuò)展名列表中钧排。
當(dāng)您使用 Flask-WTF 表單時(shí)敦腔，file 字段對(duì)象的 data 屬性指向 FileStorage 實(shí)例，因此將文件保存到磁盤的工作方式與上面的示例相同恨溜。
保護(hù)文件上傳
上一節(jié)中給出的文件上傳示例是一個(gè)非常簡單的實(shí)現(xiàn)符衔，不是很健壯找前。Web 開發(fā)中最重要的規(guī)則之一是永遠(yuǎn)不要信任客戶提交的數(shù)據(jù)，因此在使用常規(guī)表單時(shí)判族，像 Flask-WTF 這樣的擴(kuò)展會(huì)在接受表單和整合數(shù)據(jù)到應(yīng)用程序中之前對(duì)所有字段進(jìn)行嚴(yán)格驗(yàn)證躺盛。對(duì)于包含文件字段的表單，也需要進(jìn)行驗(yàn)證五嫂，因?yàn)槿绻贿M(jìn)行文件驗(yàn)證颗品，服務(wù)器將為攻擊敞開大門。例如:
- 攻擊者可以上傳一個(gè)非常大的文件沃缘，以至于服務(wù)器中的磁盤空間完全被填滿躯枢，從而導(dǎo)致服務(wù)器出現(xiàn)故障
- 攻擊者可以使用文件名（例如../../../.bashrc或類似文件）的上傳請(qǐng)求，以試圖欺騙服務(wù)器重寫系統(tǒng)配置文件槐臀。
- 攻擊者可以上傳帶有病毒或其他類型惡意軟件的文件到應(yīng)用程序需要使用的位置锄蹂，例如，用戶頭像
限制上傳文件的大小
為了防止客戶端上傳非常大的文件水慨，您可以使用 Flask 提供的配置選項(xiàng)得糜。MAX_CONTENT_LENGTH 選項(xiàng)控制請(qǐng)求主體可以擁有的最大大小。雖然這不是一個(gè)特定于文件上傳的選項(xiàng)晰洒，但設(shè)置一個(gè)最大的請(qǐng)求體大小有效地使 Flask 使用413狀態(tài)碼丟棄大于允許的請(qǐng)求體大小的請(qǐng)求
讓我們修改上一節(jié)中的 app.py 示例朝抖，只接受最大為1 MB 的請(qǐng)求:
app.config['MAX_CONTENT_LENGTH'] = 1024 * 1024
如果你試圖上傳一個(gè)大于1 MB 的文件，應(yīng)用程序現(xiàn)在將拒絕它谍珊。
驗(yàn)證文件名
我們不能完全相信客戶端提供的文件名是有效的和可以安全使用的治宣，所以隨上傳文件一起提供的文件名必須經(jīng)過驗(yàn)證。
要執(zhí)行的一個(gè)非常簡單的驗(yàn)證是確保文件擴(kuò)展名是應(yīng)用程序愿意接受的擴(kuò)展名砌滞，這與使用 Flask-WTF 時(shí)F FileAllowed 驗(yàn)證器所做的類似侮邀。假設(shè)應(yīng)用程序接受圖像，那么它可以配置允許的文件擴(kuò)展名列表:
app.config['UPLOAD_EXTENSIONS'] = ['.jpg', '.png', '.gif']
對(duì)于每個(gè)上傳的文件贝润，應(yīng)用程序可以確保文件擴(kuò)展名是允許的:
filename = uploaded_file.filename
if filename != '':
file_ext = os.path.splitext(filename)[1]
if file_ext not in current_app.config['UPLOAD_EXTENSIONS']:
abort(400)
使用這種邏輯绊茧，任何不在允許的文件擴(kuò)展名的文件名，都會(huì)出現(xiàn)400錯(cuò)誤打掘。
除了文件擴(kuò)展名之外华畏，驗(yàn)證文件名以及提供的任何路徑也很重要。 如果你的應(yīng)用程序不關(guān)心客戶端提供的文件名尊蚁，則處理上傳的最安全方法是忽略客戶端提供的文件名唯绍，而是生成自己的文件名，然后傳遞給 save() 方法枝誊。 這種技術(shù)工作良好的示例是頭像上傳况芒。 每個(gè)用戶的頭像都可以使用用戶 ID 保存為文件名，因此客戶端提供的文件名可以丟棄。 如果你的應(yīng)用程序使用 Flask-Login绝骚，則可以實(shí)現(xiàn)以下 save() 調(diào)用：
uploaded_file.save(os.path.join('static/avatars', current_user.get_id()))
在其他情況下耐版，保留客戶端提供的文件名可能更好，因此必須首先清理文件名压汪。對(duì)于這些情況粪牲，Werkzeug 提供了 secure_filename() 函數(shù)。讓我們通過在 Python shell 中運(yùn)行一些測試來看看這個(gè)函數(shù)是如何工作的:
>>> from werkzeug.utils import secure_filename
>>> secure_filename('foo.jpg')
'foo.jpg'
>>> secure_filename('/some/path/foo.jpg')
'some_path_foo.jpg'
>>> secure_filename('../../../.bashrc')
'bashrc'
正如你在示例中看到的止剖，無論文件名有多么復(fù)雜或多么惡意腺阳，secure_filename() 函數(shù)都將其縮減為一個(gè)單位文件名。
讓我們將 secure_filename() 合并到示例上傳服務(wù)器中穿香，并添加一個(gè)配置變量亭引，該變量定義文件上傳的專用位置。下面是帶有安全文件名的完整 app.py 源文件:
import os
from flask import Flask, render_template, request, redirect, url_for, abort
from werkzeug.utils import secure_filename
app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 1024 * 1024
app.config['UPLOAD_EXTENSIONS'] = ['.jpg', '.png', '.gif']
app.config['UPLOAD_PATH'] = 'uploads'
@app.route('/')
def index():
return render_template('index.html')
@app.route('/', methods=['POST'])
def upload_files():
uploaded_file = request.files['file']
filename = secure_filename(uploaded_file.filename)
if filename != '':
file_ext = os.path.splitext(filename)[1]
if file_ext not in app.config['UPLOAD_EXTENSIONS']:
abort(400)
uploaded_file.save(os.path.join(app.config['UPLOAD_PATH'], filename))
return redirect(url_for('index'))
注意
secure_filename 函數(shù)將過濾所有非ASCII字符皮获，因此焙蚓，如果filename 是 "頭像.jpg"之類的，則結(jié)果為"jpg"洒宝，但沒有格式购公，這是個(gè)問題，我建議使用uuid模塊重命名上傳的文件雁歌，以避免出現(xiàn)上述情況宏浩。
驗(yàn)證文件內(nèi)容
我將要討論的第三層驗(yàn)證是最復(fù)雜的。如果您的應(yīng)用程序接受某種文件類型的上傳靠瞎，那么理想情況下绘闷，它應(yīng)該執(zhí)行某種形式的內(nèi)容驗(yàn)證，并拒絕任何不同類型的文件较坛。
如何實(shí)現(xiàn)內(nèi)容驗(yàn)證在很大程度上取決于應(yīng)用程序接受的文件類型。對(duì)于本文中的示例應(yīng)用程序扒最，我使用的是圖像丑勤，因此可以使用 Python 標(biāo)準(zhǔn)庫中的 imghdr 包驗(yàn)證文件頭實(shí)際上是一個(gè)圖像。
讓我們編寫一個(gè) validate_image() 函數(shù)吧趣，對(duì)圖像執(zhí)行內(nèi)容驗(yàn)證:
import imghdr
def validate_image(stream):
header = stream.read(512)
stream.seek(0)
format = imghdr.what(None, header)
if not format:
return None
return '.' + (format if format != 'jpeg' else 'jpg')
這個(gè)函數(shù)以一個(gè)字節(jié)流作為參數(shù)法竞。它首先從流中讀取512個(gè)字節(jié)，然后重置流指針强挫，因?yàn)樯院螽?dāng)調(diào)用 save ()函數(shù)時(shí)岔霸，我們希望它看到整個(gè)流。前512字節(jié)的圖像數(shù)據(jù)將足以識(shí)別圖像的格式俯渤。
如果第一個(gè)參數(shù)是文件名呆细，imghdr.what() 函數(shù)可以查看存儲(chǔ)在磁盤上的文件; 如果第一個(gè)參數(shù)是 None，數(shù)據(jù)在第二個(gè)參數(shù)中傳遞八匠，則可以查看存儲(chǔ)在內(nèi)存中的數(shù)據(jù)絮爷。FileStorage 對(duì)象為我們提供了一個(gè)流趴酣，因此最方便的選項(xiàng)是從它中讀取安全數(shù)量的數(shù)據(jù)，并在第二個(gè)參數(shù)中將其作為字節(jié)序列傳遞坑夯。
imghdr.what() 的返回值是檢測到的圖像格式岖寞。該函數(shù)支持多種格式，其中包括流行的 jpeg柜蜈、 png 和 gif仗谆。如果未檢測到已知的圖像格式，則返回值為 None淑履。如果檢測到格式隶垮，則返回該格式的名稱。最方便的是將格式作為文件擴(kuò)展名返回鳖谈，因?yàn)閼?yīng)用程序可以確保檢測到的擴(kuò)展名與文件擴(kuò)展名匹配岁疼，所以 validate_image() 函數(shù)將檢測到的格式轉(zhuǎn)換為文件擴(kuò)展名。這很簡單缆娃，只需為除 jpeg 外的所有圖像格式添加一個(gè)點(diǎn)作為前綴捷绒，jpeg 除外，通常使用 .jpg擴(kuò)展名贯要。
下面是完整的 app.py暖侨，包含前面幾節(jié)中的所有特性和內(nèi)容驗(yàn)證:
import imghdr
import os
from flask import Flask, render_template, request, redirect, url_for, abort
from werkzeug.utils import secure_filename
app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 1024 * 1024
app.config['UPLOAD_EXTENSIONS'] = ['.jpg', '.png', '.gif']
app.config['UPLOAD_PATH'] = 'uploads'
def validate_image(stream):
header = stream.read(512)
stream.seek(0)
format = imghdr.what(None, header)
if not format:
return None
return '.' + (format if format != 'jpeg' else 'jpg')
@app.route('/')
def index():
return render_template('index.html')
@app.route('/', methods=['POST'])
def upload_files():
uploaded_file = request.files['file']
filename = secure_filename(uploaded_file.filename)
if filename != '':
file_ext = os.path.splitext(filename)[1]
if file_ext not in app.config['UPLOAD_EXTENSIONS'] or \
file_ext != validate_image(uploaded_file.stream):
abort(400)
uploaded_file.save(os.path.join(app.config['UPLOAD_PATH'], filename))
return redirect(url_for('index'))
在視圖函數(shù)中唯一的變化就是加入了最后一個(gè)驗(yàn)證邏輯:
if file_ext not in app.config['UPLOAD_EXTENSIONS'] or \
file_ext != validate_image(uploaded_file.stream):
abort(400)
這個(gè)擴(kuò)展檢查首先確保文件擴(kuò)展名在允許的列表中，然后確保通過查看數(shù)據(jù)流檢測到的文件擴(kuò)展名與文件擴(kuò)展名相同崇渗。
在測試這個(gè)版本的應(yīng)用程序之前字逗，創(chuàng)建一個(gè)名為 uploads 的目錄(或者你在 UPLOAD_PATH 配置變量中定義的路徑) ，以便可以將文件保存在那里宅广。
使用上傳的文件
你現(xiàn)在知道如何處理文件上傳葫掉。對(duì)于某些應(yīng)用程序，這就是所需要的全部內(nèi)容跟狱，因?yàn)檫@些文件用于某些內(nèi)部進(jìn)程俭厚。但是對(duì)于大量的應(yīng)用程序，特別是那些具有社交功能的應(yīng)用程序驶臊，比如頭像挪挤，用戶上傳的文件必須與應(yīng)用程序集成。以 avatar 為例关翎，一旦用戶上傳了他們的 avatars 圖片扛门，任何提到用戶名的地方都需要上傳的圖片顯示在側(cè)面。
我將文件上傳分為兩大類纵寝，具體取決于用戶上傳的文件是供公眾使用還是對(duì)每個(gè)用戶私有论寨。 本文中多次討論過的 avatar 圖像顯然屬于第一類，因?yàn)檫@些 avatar 旨在與其他用戶公開共享。 另一方面政基，對(duì)上傳的圖像執(zhí)行編輯操作的應(yīng)用程序可能在第二類中贞铣，因?yàn)槟阆Ｍ總€(gè)用戶只能訪問自己的圖像。
公共文件上傳
當(dāng)圖像屬于公共性質(zhì)時(shí)沮明，使圖像可供應(yīng)用程序使用的最簡單方法是將上傳目錄放在應(yīng)用程序的靜態(tài)文件夾中辕坝。例如，可以在 static 中創(chuàng)建 avatars 子目錄荐健，然后使用用戶 id 作為名稱在該位置保存頭像酱畅。
使用 url_for() 函數(shù)以與應(yīng)用程序的常規(guī)靜態(tài)文件相同的方式引用存儲(chǔ)在靜態(tài)文件夾的子目錄中的這些上傳文件。 我之前建議在保存上傳的頭像圖像時(shí)使用用戶 id 作為文件名江场。這就是圖片保存的方式:
uploaded_file.save(os.path.join('static/avatars', current_user.get_id()))
使用這個(gè)實(shí)現(xiàn)纺酸，給定一個(gè)用戶 id，可以生成用戶頭像的 URL 如下:
url_for('static', filename='avatars/' + str(user_id))
或者址否，可以將上傳保存到靜態(tài)文件夾外的目錄中餐蔬，然后可以添加新的路由來為其提供服務(wù)。在示例 app.py 應(yīng)用程序文件中佑附，上傳的文件保存到 UPLOAD_PATH 配置變量中設(shè)置的位置樊诺。為了從該位置提供這些文件，我們可以實(shí)現(xiàn)以下路由:
from flask import send_from_directory
@app.route('/uploads/<filename>')
def upload(filename):
return send_from_directory(app.config['UPLOAD_PATH'], filename)
這個(gè)解決方案比在靜態(tài)文件夾中存儲(chǔ)上傳的一個(gè)優(yōu)點(diǎn)是音同，在返回這些文件之前词爬，你可以實(shí)現(xiàn)額外的限制，要么直接在函數(shù)體內(nèi)使用 Python 邏輯权均，要么使用 decorator顿膨。例如，如果你只希望向登錄的用戶提供對(duì)上傳的訪問叽赊，那么你可以將 Flask-Login 的 @login_required 裝飾器添加到這個(gè)路由中恋沃，或者添加用于正常路由的任何其他身份驗(yàn)證或角色檢查機(jī)制。
讓我們使用這種實(shí)現(xiàn)思想在示例應(yīng)用程序中顯示上傳的文件必指。下面是 app.py 的一個(gè)新的完整版本:
import imghdr
import os
from flask import Flask, render_template, request, redirect, url_for, abort, \
send_from_directory
from werkzeug.utils import secure_filename
app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 1024 * 1024
app.config['UPLOAD_EXTENSIONS'] = ['.jpg', '.png', '.gif']
app.config['UPLOAD_PATH'] = 'uploads'
def validate_image(stream):
header = stream.read(512) # 512 bytes should be enough for a header check
stream.seek(0) # reset stream pointer
format = imghdr.what(None, header)
if not format:
return None
return '.' + (format if format != 'jpeg' else 'jpg')
@app.route('/')
def index():
files = os.listdir(app.config['UPLOAD_PATH'])
return render_template('index.html', files=files)
@app.route('/', methods=['POST'])
def upload_files():
uploaded_file = request.files['file']
filename = secure_filename(uploaded_file.filename)
if filename != '':
file_ext = os.path.splitext(filename)[1]
if file_ext not in app.config['UPLOAD_EXTENSIONS'] or \
file_ext != validate_image(uploaded_file.stream):
abort(400)
uploaded_file.save(os.path.join(app.config['UPLOAD_PATH'], filename))
return redirect(url_for('index'))
@app.route('/uploads/<filename>')
def upload(filename):
return send_from_directory(app.config['UPLOAD_PATH'], filename)
除了新的 upload() 函數(shù)之外囊咏，index() 視圖函數(shù)使用 os.listdir ()獲取上傳位置中的文件列表，并將其發(fā)送到模板以進(jìn)行呈現(xiàn)取劫。更新后的 _index.html _模板內(nèi)容如下:
<!doctype html>
<html>
<head>
<title>File Upload</title>
</head>
<body>
<h1>File Upload</h1>
<form method="POST" action="" enctype="multipart/form-data">
<p><input type="file" name="file"></p>
<p><input type="submit" value="Submit"></p>
</form>
<hr>
{% for file in files %}
<img src="{{ url_for('upload', filename=file) }}" style="width: 64px">
{% endfor %}
</body>
</html>
有了這些改變，每次你上傳一張圖片研侣，頁面底部就會(huì)添加一個(gè)縮略圖:
私有文件上傳
當(dāng)用戶將私有文件上傳到應(yīng)用程序時(shí)谱邪，需要進(jìn)行額外的檢查，以防止一個(gè)用戶與未經(jīng)授權(quán)的方共享文件庶诡。這些情況的解決方案需要上面所示的 upload() 視圖函數(shù)的變體惦银，以及額外的訪問檢查。
一個(gè)常見的要求是只與所有者共享上傳的文件。當(dāng)存在此需求時(shí)扯俱，存儲(chǔ)上傳的一種方便方法是為每個(gè)用戶使用一個(gè)單獨(dú)的目錄书蚪。例如，可以將給定用戶的上傳保存到 uploads/<user_id> 目錄迅栅，然后可以修改 uploads() 函數(shù)殊校，使其只服務(wù)于用戶自己的上傳目錄，這樣一來读存，一個(gè)用戶就不可能從另一個(gè)用戶那里查看文件为流。下面你可以看到這個(gè)技術(shù)的一個(gè)可能的實(shí)現(xiàn)，再次假設(shè)使用了 Flask-Login:
@app.route('/uploads/<filename>')
@login_required
def upload(filename):
return send_from_directory(os.path.join(
app.config['UPLOAD_PATH'], current_user.get_id()), filename)
顯示上傳進(jìn)度
到目前為止让簿，我們一直依賴 web 瀏覽器提供的原生文件上傳小部件來啟動(dòng)我們的文件上傳敬察。我相信我們都同意這個(gè)小工具不是很吸引人。不僅如此尔当，由于缺少上傳進(jìn)度顯示莲祸，它無法用于上傳大文件，因?yàn)橛脩粼谡麄€(gè)上傳過程中不能收到任何反饋椭迎。雖然本文的范圍是涵蓋服務(wù)器端锐帜，但我認(rèn)為，如果能夠給你提供一些關(guān)于如何實(shí)現(xiàn)一個(gè)基于 JavaScript 的現(xiàn)代文件上傳小部件以顯示上傳進(jìn)度的想法將很有用侠碧。
好消息是抹估，在服務(wù)器上不需要進(jìn)行任何大的更改，無論你在瀏覽器中使用哪種方法來啟動(dòng)上傳弄兜，上傳機(jī)制都以相同的方式工作药蜻。 為了向你展示一個(gè)示例實(shí)現(xiàn)，我將用與流行的文件上傳客戶端 dropzone.js 兼容的index.html 替換HTML表單替饿。
下面是一個(gè)新版本的 templates/index.html语泽，它從 CDN 加載下拉區(qū) CSS 和 JavaScript 文件，并根據(jù)dropzone documentation 實(shí)現(xiàn)一個(gè)上傳表單:
<html>
<head>
<title>File Upload</title>
<link rel="stylesheet" >
</head>
<body>
<h1>File Upload</h1>
<form action="{{ url_for('upload_files') }}" class="dropzone">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.js"></script>
</body>
</html>
在實(shí)現(xiàn) dropzone 時(shí)视卢，我發(fā)現(xiàn)了一件有趣的事情踱卵，那就是它要求設(shè)置 <form> 元素中的 action 屬性，即使標(biāo)準(zhǔn) forms 接受一個(gè)空的動(dòng)作來指示提交到相同的 URL据过。
用這個(gè)新版的模板啟動(dòng)服務(wù)器惋砂，你會(huì)得到以下結(jié)果:
基本上就是這樣！現(xiàn)在你可以拖拽文件绳锅，它們將上傳到服務(wù)器西饵，并帶有一個(gè)進(jìn)度條和成功或失敗的最終指示。
如果文件上傳失敗鳞芙，無論是由于文件太大或無效眷柔，dropzone 想要顯示一個(gè)錯(cuò)誤消息期虾。因?yàn)槲覀兊姆?wù)器正在返回413和400錯(cuò)誤的標(biāo)準(zhǔn) Flask 錯(cuò)誤頁面，您將在錯(cuò)誤彈出窗口中看到一些亂七八糟的 HTML驯嘱。為了糾正這個(gè)錯(cuò)誤镶苞，我們可以更新服務(wù)器以文本形式返回錯(cuò)誤響應(yīng)。
當(dāng)請(qǐng)求有效負(fù)載大于配置中設(shè)置的大小時(shí)鞠评，F(xiàn)lask 會(huì)生成文件過大條件的413錯(cuò)誤茂蚓。要覆蓋默認(rèn)的錯(cuò)誤頁面，我們必須使用 app.errorhandler 裝飾器:
@app.errorhandler(413)
def too_large(e):
return "File is too large", 413
當(dāng)任何驗(yàn)證檢查失敗時(shí)谢澈，應(yīng)用程序?qū)⑸傻诙€(gè)錯(cuò)誤條件煌贴。在這種情況下，錯(cuò)誤是通過一個(gè) abort(400) 調(diào)用生成的锥忿。取而代之的是牛郑，可以直接生成響應(yīng):
if file_ext not in app.config['UPLOAD_EXTENSIONS'] or \
file_ext != validate_image(uploaded_file.stream):
return "Invalid image", 400
我要做的最后一個(gè)改變并不是真的需要，但是它節(jié)省了一點(diǎn)帶寬敬鬓。對(duì)于成功上傳淹朋，服務(wù)器返回一個(gè) redirect() 到主路由。這將導(dǎo)致上傳表單再次顯示钉答，并刷新頁面底部的上載縮略圖列表〈∩郑現(xiàn)在這些都不需要了，因?yàn)樯蟼魇亲鳛楹笈_(tái)請(qǐng)求通過 dropzone 完成的数尿，所以我們可以消除重定向仑性，并使用代碼204切換到空響應(yīng)。
下面是 app.py 的完整更新版本右蹦，可以與 dropzone.js 一起使用:
import imghdr
import os
from flask import Flask, render_template, request, redirect, url_for, abort, \
send_from_directory
from werkzeug.utils import secure_filename
app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 2 * 1024 * 1024
app.config['UPLOAD_EXTENSIONS'] = ['.jpg', '.png', '.gif']
app.config['UPLOAD_PATH'] = 'uploads'
def validate_image(stream):
header = stream.read(512)
stream.seek(0)
format = imghdr.what(None, header)
if not format:
return None
return '.' + (format if format != 'jpeg' else 'jpg')
@app.errorhandler(413)
def too_large(e):
return "File is too large", 413
@app.route('/')
def index():
files = os.listdir(app.config['UPLOAD_PATH'])
return render_template('index.html', files=files)
@app.route('/', methods=['POST'])
def upload_files():
uploaded_file = request.files['file']
filename = secure_filename(uploaded_file.filename)
if filename != '':
file_ext = os.path.splitext(filename)[1]
if file_ext not in app.config['UPLOAD_EXTENSIONS'] or \
file_ext != validate_image(uploaded_file.stream):
return "Invalid image", 400
uploaded_file.save(os.path.join(app.config['UPLOAD_PATH'], filename))
return '', 204
@app.route('/uploads/<filename>')
def upload(filename):
return send_from_directory(app.config['UPLOAD_PATH'], filename)
用這個(gè)更新重新啟動(dòng)應(yīng)用程序诊杆，現(xiàn)在錯(cuò)誤將會(huì)有一個(gè)正確的消息:
dropzone.js 庫非常靈活，有許多定制選項(xiàng)何陆，因此我鼓勵(lì)你訪問他們的文檔晨汹，了解如何使其適應(yīng)你的需求。你也可以尋找其他的 JavaScript 文件上傳庫贷盲，因?yàn)樗鼈兌甲裱?HTTP 標(biāo)準(zhǔn)淘这，這意味著你的 Flask 服務(wù)器可以很好地與它們一起工作。
本文由博客一文多發(fā)平臺(tái) OpenWrite 發(fā)布巩剖！
