Web 應(yīng)用程序的一個(gè)常見特性是允許用戶將文件上傳到服務(wù)器。在 RFC 1867 中協(xié)議記錄了客戶端上傳文件的機(jī)制，我們最喜歡的 Web 框架 Flask 完全支持這一機(jī)制，但是對于許多開發(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ù)將在請求 URL 的查詢字符串中提交，而使用 POST 時(shí)，數(shù)據(jù)將進(jìn)入請求主體。在表單中包含文件時(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 接受文件提交
對于常規(guī)表單，F(xiàn)lask 提供了對 request.form 字典中提交的表單字段的訪問。 但是，文件字段包含在request.files 字典中。 request.form 和 request.files 字典實(shí)際上是“multi-dicts”，它是一種支持重復(fù)鍵的專門字典實(shí)現(xiàn)。 這是必要的，因?yàn)楸韱慰梢园鄠€(gè)具有相同名稱的字段，通常情況下是由多組復(fù)選框組成。 對于允許多個(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請求時(shí)調(diào)用該函數(shù)。 請注意，同一個(gè)根 URL 是如何在兩個(gè)視圖函數(shù)之間進(jìn)行拆分的，并將 index() 設(shè)置為接受 GET 請求，將 upload_file``() 上傳為 POST 請求。
uploaded_file 變量保存提交的文件對象。 這是 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í)，對 GET 和 POST 請求使用單個(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 對象上傳文件。到目前為止，你看到的例子中使用的表單可以使用 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 對象來自 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 字段對象的 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)用程序中之前對所有字段進(jìn)行嚴(yán)格驗(yàn)證。對于包含文件字段的表單，也需要進(jìn)行驗(yàn)證，因?yàn)槿绻贿M(jìn)行文件驗(yàn)證，服務(wù)器將為攻擊敞開大門。例如:
- 攻擊者可以上傳一個(gè)非常大的文件，以至于服務(wù)器中的磁盤空間完全被填滿，從而導(dǎo)致服務(wù)器出現(xiàn)故障
- 攻擊者可以使用文件名（例如../../../.bashrc或類似文件）的上傳請求，以試圖欺騙服務(wù)器重寫系統(tǒng)配置文件。
- 攻擊者可以上傳帶有病毒或其他類型惡意軟件的文件到應(yīng)用程序需要使用的位置，例如，用戶頭像
限制上傳文件的大小
為了防止客戶端上傳非常大的文件，您可以使用 Flask 提供的配置選項(xiàng)。MAX_CONTENT_LENGTH 選項(xiàng)控制請求主體可以擁有的最大大小。雖然這不是一個(gè)特定于文件上傳的選項(xiàng)，但設(shè)置一個(gè)最大的請求體大小有效地使 Flask 使用413狀態(tài)碼丟棄大于允許的請求體大小的請求
讓我們修改上一節(jié)中的 app.py 示例，只接受最大為1 MB 的請求:
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']
對于每個(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()))
在其他情況下，保留客戶端提供的文件名可能更好，因此必須首先清理文件名。對于這些情況，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)用程序接受的文件類型。對于本文中的示例應(yīng)用程序，我使用的是圖像，因此可以使用 Python 標(biāo)準(zhǔn)庫中的 imghdr 包驗(yàn)證文件頭實(shí)際上是一個(gè)圖像。
讓我們編寫一個(gè) validate_image() 函數(shù)，對圖像執(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ù)將足以識別圖像的格式。
如果第一個(gè)參數(shù)是文件名，imghdr.what() 函數(shù)可以查看存儲(chǔ)在磁盤上的文件; 如果第一個(gè)參數(shù)是 None，數(shù)據(jù)在第二個(gè)參數(shù)中傳遞，則可以查看存儲(chǔ)在內(nèi)存中的數(shù)據(jù)。FileStorage 對象為我們提供了一個(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)在知道如何處理文件上傳。對于某些應(yīng)用程序，這就是所需要的全部內(nèi)容，因?yàn)檫@些文件用于某些內(nèi)部進(jìn)程。但是對于大量的應(yīng)用程序，特別是那些具有社交功能的應(yīng)用程序，比如頭像，用戶上傳的文件必須與應(yīng)用程序集成。以 avatar 為例，一旦用戶上傳了他們的 avatars 圖片，任何提到用戶名的地方都需要上傳的圖片顯示在側(cè)面。
我將文件上傳分為兩大類，具體取決于用戶上傳的文件是供公眾使用還是對每個(gè)用戶私有。 本文中多次討論過的 avatar 圖像顯然屬于第一類，因?yàn)檫@些 avatar 旨在與其他用戶公開共享。 另一方面，對上傳的圖像執(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。例如，如果你只希望向登錄的用戶提供對上傳的訪問，那么你可以將 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)請求有效負(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)帶寬。對于成功上傳，服務(wù)器返回一個(gè) redirect() 到主路由。這將導(dǎo)致上傳表單再次顯示，并刷新頁面底部的上載縮略圖列表。現(xiàn)在這些都不需要了，因?yàn)樯蟼魇亲鳛楹笈_請求通過 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ā)平臺 OpenWrite 發(fā)布！
