Python?Flask實(shí)現(xiàn)圖片上傳與下載的示例詳解
更新時(shí)間：2022年05月31日 10:28:12 作者：beautifulzzzz
這篇文章主要為大家詳細(xì)介紹了如何利用Python和Flask實(shí)現(xiàn)圖片上傳與下載（支持漂亮的拖拽上傳），文中示例代碼講解詳細(xì)，感興趣的可以了解一下
1、效果預(yù)覽
我們基于 Flask 官方指導(dǎo)工程，增加一個(gè)圖片拖拽上傳功能，效果如下：
2、新增邏輯概覽
我們?cè)诠俜?a target="_blank">指導(dǎo)工程上進(jìn)行增加代碼，改動(dòng)如下：
由于 flask 官方 Demo 基于藍(lán)圖設(shè)計(jì)，這給我們新增邏輯帶來(lái)了很大的方便。關(guān)于官方 Demo 的介紹，可以參考《Flask 入門（以一個(gè)博客后臺(tái)為例）》
3、tuchuang.py 邏輯介紹
3.1 圖片上傳
1）該接口采用 POST 方法，需要登錄；
2）接著，檢查請(qǐng)求中是否有 'file' 關(guān)鍵詞，然后取出文件，判斷文件是否為空或是否合法；
3）最后，將上傳的圖片保存（采用秒級(jí)別的時(shí)間戳+隨機(jī)數(shù)重命名）；
4）該接口在上傳圖片成功后，返回該圖片的鏈接；如果不成功，返回 upload.html 頁(yè)面；
@bp.route('/', methods=['GET', 'POST'])
@login_required
def upload_file():
if request.method == 'POST':
# check if the post request has the file part
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
# If the user does not select a file, the browser submits an
# empty file without a filename.
if file.filename == '':
flash('No selected file')
return redirect(request.url)
if file and allowed_file(file.filename):
# 獲取安全的文件名 正常文件名
filename = secure_filename(file.filename)
# 生成隨機(jī)數(shù)
random_num = random.randint(0, 100)
# f.filename.rsplit('.', 1)[1] 獲取文件的后綴
filename = datetime.now().strftime("%Y%m%d%H%M%S") + "_" + str(random_num) + "." + filename.rsplit('.', 1)[1]
file_path = app.config['UPLOAD_FOLDER'] # basedir 代表獲取當(dāng)前位置的絕對(duì)路徑
# 如果文件夾不存在，就創(chuàng)建文件夾
if not os.path.exists(file_path):
os.makedirs(file_path)
file.save(os.path.join(file_path, filename))
return redirect(url_for('tuchuang.download_file', name=filename))
return render_template("tuchuang/upload.html")
3.2 圖片合法檢查
上述代碼中有一個(gè)合法檢測(cè)的函數(shù) allowed_file，用于檢查上傳圖片的后綴是否在允許列表：
basedir = os.path.abspath(os.path.dirname(__file__)) # 獲取當(dāng)前文件所在目錄
UPLOAD_FOLDER = basedir+'/static/file/img' # 計(jì)算圖片文件存放目錄
ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'} # 設(shè)置可上傳圖片后綴
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
bp = Blueprint("tuchuang", __name__, url_prefix="/tuchuang")
def allowed_file(filename): # 檢查上傳圖片是否在可上傳圖片允許列表
return '.' in filename and \
filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
3.3 圖片下載
圖片下載比較簡(jiǎn)單，就是調(diào)用 send_from_directory 函數(shù)，就能夠把 static 目錄下的對(duì)應(yīng)文件發(fā)出：（我們一般把各種用于外面訪問(wèn)的靜態(tài)圖片、JS、CSS 等放在 static 文件中）
@bp.route('/download/<name>')
def download_file(name):
return send_from_directory(app.config["UPLOAD_FOLDER"], name)
4、__init__.py 邏輯介紹
由于我們采用藍(lán)圖設(shè)計(jì)，因此需要稍微修改下 __init__.py 文件，來(lái)將 tuchuang.py 加入：
MAX_CONTENT_LENGTH=16 * 1000 * 1000上傳圖片大小限制from flaskr import auth, blog, tuchuangapp.register_blueprint(tuchuang.bp)將 tuchuang 加入藍(lán)圖app.add_url_rule("/download/<name>", endpoint="download_file", build_only=True)
5、upload.html 介紹
5.1 upload Jinja 模板介紹
- Jinja 引用外部 css：
<link rel="stylesheet" href="{{ url_for('static', filename='file/css/upload.css') }}"> - Jinja 引用外部 js：
<script type="text/javascript" src="{{ url_for('static', filename='file/js/upload.js') }}"></script> - 該 Jinja 模板實(shí)現(xiàn)了兩種圖片上傳交互：
普通版，采用 file select 框 + submit 按鈕，實(shí)現(xiàn)圖片上傳：
<form method=post enctype=multipart/form-data>
<input type=file name=file>
<input type=submit value=Upload>
</form>
拖拽版（需要借助 JS，CSS），在 <div id="drop-area"> 內(nèi)實(shí)現(xiàn)
下面是 tuchuang/upload.html 完整代碼：
<!doctype html>
<link rel="stylesheet" href="{{ url_for('static', filename='file/css/upload.css') }}" rel="external nofollow" >
<script type="text/javascript" src="{{ url_for('static', filename='file/js/upload.js') }}"></script>
<title>Upload new File</title>
<h1>Upload new File</h1>
<form method=post enctype=multipart/form-data>
<input type=file name=file>
<input type=submit value=Upload>
</form>
<div id="drop-area">
<form class="my-form">
<p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select some files</label>
<div id="gallery"></div>
<progress id="progress-bar" max=100 value=0></progress>
</form>
</div>
5.2 upload css 介紹（虛線框）
下面是拖拽需要用到的 CSS，大家暫時(shí)瀏覽下，之后結(jié)合 JS 就明白了：
#drop-area {
border: 2px dashed #ccc;
border-radius: 20px;
width: 480px;
font-family: sans-serif;
margin: 100px auto;
padding: 20px;
}
#drop-area.highlight {
border-color: purple;
}
p {
margin-top: 0;
}
.my-form {
margin-bottom: 10px;
}
#gallery {
margin-top: 10px;
}
#gallery img {
width: 150px;
margin-bottom: 10px;
margin-right: 10px;
vertical-align: middle;
}
.button {
display: inline-block;
padding: 10px;
background: #ccc;
cursor: pointer;
border-radius: 5px;
border: 1px solid #ccc;
}
.button:hover {
background: #ddd;
}
#fileElem {
display: none;
}
5.3 upload js 介紹（拖拽）
5.3.1 JS 拖拽框架
JS 代碼主要基于 window.onload + 拖拽事件實(shí)現(xiàn)，大致框架如下：
window.onload=function(){
var dropArea = document.getElementById('drop-area')
// 阻止默認(rèn)行為
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
})
function preventDefaults (e) {
e.preventDefault()
e.stopPropagation()
}
// 增加事件，鼠標(biāo)拖入邊框高亮，拖出邊框變?yōu)樵瓉?lái)樣子
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
function highlight(e) {
dropArea.classList.add('highlight')
}
function unhighlight(e) {
dropArea.classList.remove('highlight')
}
// 增加事件，鼠標(biāo)放下，之后準(zhǔn)備上傳圖片
dropArea.addEventListener('drop', handleDrop, false)
function handleDrop(e) {
// 之后準(zhǔn)備上傳圖片
}
}
window.onload() 方法用于在網(wǎng)頁(yè)加載完畢后立刻執(zhí)行的操作，即當(dāng) HTML 文檔加載完畢后，立刻執(zhí)行某個(gè)方法。
為什么使用 window.onload()?
因?yàn)?JavaScript 中的函數(shù)方法需要在 HTML 文檔渲染完成后才可以使用，如果沒(méi)有渲染完成，此時(shí)的 DOM 樹(shù)是不完整的，這樣在調(diào)用一些 JavaScript 代碼時(shí)就可能報(bào)出"undefined"錯(cuò)誤。
5.3.2 JS 圖片上傳
function handleDrop(e) {
// 從拖拽放下事件中獲取拖拽的文件
let dt = e.dataTransfer
let files = dt.files
// 調(diào)用圖片處理函數(shù)，對(duì)圖片進(jìn)行處理
handleFiles(files)
}
function handleFiles(files) {
// 對(duì)于多個(gè)圖片，循環(huán)調(diào)用 uploadFile 函數(shù)，進(jìn)行上傳
([...files]).forEach(uploadFile)
}
function uploadFile(file) {
// JS 合成表單，利用 POST 方法，實(shí)現(xiàn)上傳（部署在遠(yuǎn)端時(shí)，要改下下面的 url）
let url = 'http://127.0.0.1:5000/tuchuang/'
let formData = new FormData()
formData.append('file', file)
fetch(url, {
method: 'POST',
body: formData
})
.then(progressDone) // <- Add `progressDone` call here
.catch(() => { /* Error. Inform the user */ })
}
Fetch API 提供了一個(gè) JavaScript接口，用于訪問(wèn)和操縱HTTP管道的部分，例如請(qǐng)求和響應(yīng)。它還提供了一個(gè)全局 fetch()方法，該方法提供了一種簡(jiǎn)單，合理的方式來(lái)跨網(wǎng)絡(luò)異步獲取資源。詳細(xì)介紹參考JavaScript使用Fetch的方法詳解
- 1.進(jìn)行 fetch 請(qǐng)求 參考；
- 2.支持的請(qǐng)求參數(shù)參考；
- 3.發(fā)送帶憑據(jù)的請(qǐng)求參考；
- 4.上傳 JSON 數(shù)據(jù)參考；
- 5.上傳文件參考；
- 6.上傳多個(gè)文件參考；
- 7.檢測(cè)請(qǐng)求是否成功參考；
- 8.自定義請(qǐng)求對(duì)象參考；
- 9.Headers參考；
- 10.Guard參考；
- 11.Response 對(duì)象參考；
- 12.Body參考；
- 13.特性檢測(cè)參考；
該文章講的比較好，大家可以跳轉(zhuǎn)過(guò)去學(xué)習(xí)下～
5.3.3 JS 圖片上傳進(jìn)度條
想要帶有進(jìn)度條，我們需要修改下 handleFiles 函數(shù)：
var filesDone = 0
var filesToDo = 0
var progressBar = document.getElementById('progress-bar')
...
// 預(yù)覽
function previewFile(file) {
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function() {
let img = document.createElement('img')
img.src = reader.result
document.getElementById('gallery').appendChild(img)
}
}
// 進(jìn)度條初始化，fileDone 置 0，filesToDo 置需要上傳圖片總數(shù)
function initializeProgress(numfiles) {
progressBar.value = 0
filesDone = 0
filesToDo = numfiles
}
// 注意，該函作為 fetch 的返回回調(diào)函數(shù)，意思是每次傳輸完成一個(gè)圖片，進(jìn)度條進(jìn)行相應(yīng)變化
function progressDone() {
filesDone++
progressBar.value = filesDone / filesToDo * 100
}
function handleFiles(files) {
files = [...files]
initializeProgress(files.length)
files.forEach(uploadFile)
files.forEach(previewFile)
}到此這篇關(guān)于Python Flask實(shí)現(xiàn)圖片上傳與下載的示例詳解的文章就介紹到這了,更多相關(guān)Python Flask圖片上傳下載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Python面向?qū)ο笾惡蛯?duì)象屬性的增刪改查操作示例
這篇文章主要介紹了Python面向?qū)ο笾惡蛯?duì)象屬性的增刪改查操作,結(jié)合實(shí)例形式分析了Python面向?qū)ο笙嚓P(guān)的類與對(duì)象屬性常見(jiàn)操作技巧,需要的朋友可以參考下2018-12-12
本文主要給大家詳細(xì)介紹的是Python3中的lambda表達(dá)式的語(yǔ)法和用法，非常的詳細(xì)，有需要的小伙伴可以參考下2021-05-05
Python結(jié)合spaCy?進(jìn)行簡(jiǎn)易自然語(yǔ)言處理
這篇文章主要為大家介紹了Python結(jié)合spaCy進(jìn)行簡(jiǎn)易自然語(yǔ)言處理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
itertools是python內(nèi)置的模塊，使用簡(jiǎn)單且功能強(qiáng)大。本文將詳細(xì)為大家講解一下itertools模塊的使用方法，感興趣的小伙伴可以學(xué)習(xí)一下2022-05-05
今天小編就為大家分享一篇關(guān)于Python利用字典破解WIFI密碼的方法，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-02-02
python3 簡(jiǎn)單實(shí)現(xiàn)組合設(shè)計(jì)模式
這篇文章主要介紹了python3 簡(jiǎn)單實(shí)現(xiàn)組合設(shè)計(jì)模式的方法，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
python sklearn常用分類算法模型的調(diào)用
這篇文章主要介紹了python sklearn常用分類算法模型的調(diào)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
anaconda如何創(chuàng)建和刪除環(huán)境
這篇文章主要介紹了anaconda如何創(chuàng)建和刪除環(huán)境,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Python如何使用函數(shù)做字典的值,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
Python opencv缺陷檢測(cè)的實(shí)現(xiàn)及問(wèn)題解決
這篇文章主要介紹了Python opencv缺陷檢測(cè)的實(shí)現(xiàn)及問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04