Python?Flask實現(xiàn)圖片上傳與下載的示例詳解

更新時間：2022年05月31日 10:28:12 作者：beautifulzzzz

這篇文章主要為大家詳細(xì)介紹了如何利用Python和Flask實現(xiàn)圖片上傳與下載（支持漂亮的拖拽上傳），文中示例代碼講解詳細(xì)，感興趣的可以了解一下

1、效果預(yù)覽

我們基于 Flask 官方指導(dǎo)工程，增加一個圖片拖拽上傳功能，效果如下：

2、新增邏輯概覽

我們在官方指導(dǎo)工程上進行增加代碼，改動如下：

由于 flask 官方 Demo 基于藍(lán)圖設(shè)計，這給我們新增邏輯帶來了很大的方便。關(guān)于官方 Demo 的介紹，可以參考《Flask 入門（以一個博客后臺為例）》

3、tuchuang.py 邏輯介紹

3.1 圖片上傳

1）該接口采用 POST 方法，需要登錄；

2）接著，檢查請求中是否有 'file' 關(guān)鍵詞，然后取出文件，判斷文件是否為空或是否合法；

3）最后，將上傳的圖片保存（采用秒級別的時間戳+隨機數(shù)重命名）；

4）該接口在上傳圖片成功后，返回該圖片的鏈接；如果不成功，返回 upload.html 頁面；

@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)
            
            # 生成隨機數(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)前位置的絕對路徑
            
            # 如果文件夾不存在，就創(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 圖片合法檢查

上述代碼中有一個合法檢測的函數(shù) allowed_file，用于檢查上傳圖片的后綴是否在允許列表：

basedir = os.path.abspath(os.path.dirname(__file__))                 # 獲取當(dāng)前文件所在目錄
UPLOAD_FOLDER = basedir+'/static/file/img'                           # 計算圖片文件存放目錄
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 圖片下載

圖片下載比較簡單，就是調(diào)用 send_from_directory 函數(shù)，就能夠把 static 目錄下的對應(yīng)文件發(fā)出：（我們一般把各種用于外面訪問的靜態(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è)計，因此需要稍微修改下 __init__.py 文件，來將 tuchuang.py 加入：

MAX_CONTENT_LENGTH=16 * 1000 * 1000 上傳圖片大小限制
from flaskr import auth, blog, tuchuang
app.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 模板實現(xiàn)了兩種圖片上傳交互：

普通版，采用 file select 框 + submit 按鈕，實現(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)實現(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，大家暫時瀏覽下，之后結(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 + 拖拽事件實現(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)樵瓉順幼?
    ;['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)頁加載完畢后立刻執(zhí)行的操作，即當(dāng) HTML 文檔加載完畢后，立刻執(zhí)行某個方法。

為什么使用 window.onload()?

因為 JavaScript 中的函數(shù)方法需要在 HTML 文檔渲染完成后才可以使用，如果沒有渲染完成，此時的 DOM 樹是不完整的，這樣在調(diào)用一些 JavaScript 代碼時就可能報出"undefined"錯誤。

5.3.2 JS 圖片上傳

function handleDrop(e) {
	// 從拖拽放下事件中獲取拖拽的文件
    let dt = e.dataTransfer
    let files = dt.files

	// 調(diào)用圖片處理函數(shù)，對圖片進行處理
    handleFiles(files)
}

function handleFiles(files) {
	// 對于多個圖片，循環(huán)調(diào)用 uploadFile 函數(shù)，進行上傳
    ([...files]).forEach(uploadFile)
}

function uploadFile(file) {
	// JS 合成表單，利用 POST 方法，實現(xiàn)上傳（部署在遠(yuǎn)端時，要改下下面的 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 提供了一個 JavaScript接口，用于訪問和操縱HTTP管道的部分，例如請求和響應(yīng)。它還提供了一個全局 fetch()方法，該方法提供了一種簡單，合理的方式來跨網(wǎng)絡(luò)異步獲取資源。詳細(xì)介紹參考JavaScript使用Fetch的方法詳解

1.進行 fetch 請求參考；
2.支持的請求參數(shù)參考；
3.發(fā)送帶憑據(jù)的請求參考；
4.上傳 JSON 數(shù)據(jù)參考；
5.上傳文件參考；
6.上傳多個文件參考；
7.檢測請求是否成功參考；
8.自定義請求對象參考；
9.Headers參考；
10.Guard參考；
11.Response 對象參考；
12.Body參考；
13.特性檢測參考；

該文章講的比較好，大家可以跳轉(zhuǎn)過去學(xué)習(xí)下～

5.3.3 JS 圖片上傳進度條

想要帶有進度條，我們需要修改下 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)
    }
}

// 進度條初始化，fileDone 置 0，filesToDo 置需要上傳圖片總數(shù)
function initializeProgress(numfiles) {
    progressBar.value = 0
    filesDone = 0
    filesToDo = numfiles
}

// 注意，該函作為 fetch 的返回回調(diào)函數(shù)，意思是每次傳輸完成一個圖片，進度條進行相應(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實現(xiàn)圖片上傳與下載的示例詳解的文章就介紹到這了,更多相關(guān)Python Flask圖片上傳下載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

Python?Flask實現(xiàn)圖片上傳與下載的示例詳解

目錄

1、效果預(yù)覽

2、新增邏輯概覽

3、tuchuang.py 邏輯介紹

3.1 圖片上傳

3.2 圖片合法檢查

3.3 圖片下載

4、init.py 邏輯介紹

5、upload.html 介紹

5.1 upload Jinja 模板介紹

5.2 upload css 介紹（虛線框）

5.3 upload js 介紹（拖拽）

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

Python?Flask實現(xiàn)圖片上傳與下載的示例詳解

目錄

1、效果預(yù)覽

2、新增邏輯概覽

3、tuchuang.py 邏輯介紹

3.1 圖片上傳

3.2 圖片合法檢查

3.3 圖片下載

4、__init__.py 邏輯介紹

5、upload.html 介紹

5.1 upload Jinja 模板介紹

5.2 upload css 介紹（虛線框）

5.3 upload js 介紹（拖拽）

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

1、效果預(yù)覽

2、新增邏輯概覽

3、tuchuang.py 邏輯介紹

4、init.py 邏輯介紹

5、upload.html 介紹