[python][flask] Flask 圖片上傳與下載例子（支援漂亮的拖拽上傳）

目錄

• 1、效果預覽
• 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 介紹（拖拽）
    • 5.3.1 JS 拖拽框架
    • 5.3.2 JS 圖片上傳
    • 5.3.3 JS 圖片上傳進度條
• 6、後記
• 參考連結

1、效果預覽

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

2、新增邏輯概覽

我們在官方指導工程 https://github.com/pallets/flask/tree/2.1.1/examples/tutorial/flaskr 上進行增加程式碼，改動如下：

➜  flaskr git:(main) ✗ tree
.
├── static
│   ├── file
│   │   ├── css
│   │   │   └── upload.css           <-  增加圖片上傳的 CSS
│   │   ├── img
│   │   │   ├── 20220525004341_22.png
│   │   │   └── 20220529231518_76.png
│   │   └── js
│   │       └── upload.js            <- 增加圖片上傳的 JS
│   └── style.css
├── templates
│   ├── auth
│   │   ├── login.html
│   │   └── register.html
│   ├── base.html
│   ├── blog
│   │   ├── create.html
│   │   ├── index.html
│   │   └── update.html
│   └── tuchuang                     <- 增加圖片上傳的 html
│       └── upload.html
├── auth.py
├── blog.py
├── db.py
├── __init__.py
├── schema.sql
└── tuchuang.py                      <- 增加圖床 python 藍圖

9 directories, 18 files

由於 flask 官方 Demo 基於藍圖設計，這給我們新增邏輯帶來了很大的方便。關於官方 Demo 的介紹，可以參考我的《Flask 入門（以一個部落格後臺為例）》

3、tuchuang.py 邏輯介紹

3.1 圖片上傳

1）該介面採用 POST 方法，需要登入；
2）接著，檢查請求中是否有 'file' 關鍵詞，然後取出檔案，判斷檔案是否為空或是否合法；
3）最後，將上傳的圖片儲存（採用秒級別的時間戳+隨機數重新命名）；
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)
            
            # 生成隨機數
            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 代表獲取當前位置的絕對路徑
            
            # 如果資料夾不存在，就建立資料夾
            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 圖片合法檢查

上述程式碼中有一個合法檢測的函式 allowed_file，用於檢查上傳圖片的字尾是否在允許列表：

basedir = os.path.abspath(os.path.dirname(__file__))                 # 獲取當前檔案所在目錄
UPLOAD_FOLDER = basedir+'/static/file/img'                           # 計算圖片檔案存放目錄
ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'}     # 設定可上傳圖片字尾 

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 圖片下載

圖片下載比較簡單，就是呼叫 send_from_directory 函式，就能夠把 static 目錄下的對應檔案發出：（我們一般把各種用於外面訪問的靜態圖片、JS、CSS 等放在 static 檔案中）

@bp.route('/download/<name>')
def download_file(name):
    return send_from_directory(app.config["UPLOAD_FOLDER"], name)

4、__init__.py 邏輯介紹

由於我們採用藍圖設計，因此需要稍微修改下 __init__.py 檔案，來將 tuchuang.py 加入：

• MAX_CONTENT_LENGTH=16 * 1000 * 1000 上傳圖片大小限制
• from flaskr import auth, blog, tuchuang
• app.register_blueprint(tuchuang.bp) 將 tuchuang 加入藍圖
• 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 模板實現了兩種圖片上傳互動：
  • 普通版，採用 file select 框 + submit 按鈕，實現圖片上傳：

    <form method=post enctype=multipart/form-data>
        <input type=file name=file>
        <input type=submit value=Upload>
    </form>
    

  • 拖拽版（需要藉助 JS，CSS），在 <div id="drop-area"> 內實現

下面是 tuchuang/upload.html 完整程式碼：

<!doctype html>
<link rel="stylesheet" href="{{ url_for('static', filename='file/css/upload.css') }}">
<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，大家暫時瀏覽下，之後結合 JS 就明白了：

➜  css git:(main) ✗ cat upload.css            
#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 + 拖拽事件實現，大致框架如下：

➜  js git:(main) ✗ cat upload.js 
window.onload=function(){
    var dropArea = document.getElementById('drop-area')

    // 阻止預設行為
    ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false)
    })

    function preventDefaults (e) {
        e.preventDefault()
        e.stopPropagation()
    }

    // 增加事件，滑鼠拖入邊框高亮，拖出邊框變為原來樣子
    ;['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')
    }

    // 增加事件，滑鼠放下，之後準備上傳圖片
    dropArea.addEventListener('drop', handleDrop, false)

    function handleDrop(e) {
    	// 之後準備上傳圖片
    }
}

window.onload() 方法用於在網頁載入完畢後立刻執行的操作，即當 HTML 文件載入完畢後，立刻執行某個方法。

為什麼使用 window.onload()?

因為 JavaScript 中的函式方法需要在 HTML 文件渲染完成後才可以使用，如果沒有渲染完成，此時的 DOM 樹是不完整的，這樣在呼叫一些 JavaScript 程式碼時就可能報出"undefined"錯誤。

5.3.2 JS 圖片上傳

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

	// 呼叫圖片處理函式，對圖片進行處理
    handleFiles(files)
}

function handleFiles(files) {
	// 對於多個圖片，迴圈呼叫 uploadFile 函式，進行上傳
    ([...files]).forEach(uploadFile)
}

function uploadFile(file) {
	// JS 合成表單，利用 POST 方法，實現上傳（部署在遠端時，要改下下面的 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管道的部分，例如請求和響應。它還提供了一個全域性 fetch()方法，該方法提供了一種簡單，合理的方式來跨網路非同步獲取資源。詳細介紹參考《參考連結[8]》：

• 1.進行 fetch 請求 參考；
• 2.支援的請求引數參考；
• 3.傳送帶憑據的請求參考；
• 4.上傳 JSON 資料參考；
• 5.上傳檔案參考；
• 6.上傳多個檔案參考；
• 7.檢測請求是否成功參考；
• 8.自定義請求物件參考；
• 9.Headers參考；
• 10.Guard參考；
• 11.Response 物件參考；
• 12.Body參考；
• 13.特性檢測參考；

該文章講的比較好，大家可以跳轉過去學習下～

5.3.3 JS 圖片上傳進度條

想要帶有進度條，我們需要修改下 handleFiles 函式：

var filesDone = 0
var filesToDo = 0
var progressBar = document.getElementById('progress-bar')

...

// 預覽
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 置需要上傳圖片總數
function initializeProgress(numfiles) {
    progressBar.value = 0
    filesDone = 0
    filesToDo = numfiles
}

// 注意，該函作為 fetch 的返回回撥函式，意思是每次傳輸完成一個圖片，進度條進行相應變化
function progressDone() {
    filesDone++
    progressBar.value = filesDone / filesToDo * 100
}

function handleFiles(files) {
    files = [...files]
    initializeProgress(files.length) 
    files.forEach(uploadFile)
    files.forEach(previewFile)
}

6、後記

本文涉及到的原始碼在 GITHUB，後續我會基於該工程加入各種有意思的功能。
此外，之前的兩篇文章列在下面，可能對您理解本文有幫助：

• [python][flask] Jinja 模板入門
• [python][flask] Flask 入門（以一個部落格後臺為例）

參考連結

[1]. 本文程式碼 GITHUB
[2]. 在HTML中引入CSS的幾種方式介紹
[3]. python Flask中html模版中如何引用css，js等資源
[4]. HTML引入JS的兩種方法
[5]. 使用Flask引用HTML中的.js檔案的靜態資源問題
[6]. Flask 官方指導 Uploading Files
[7]. JavaScript window.onload
[8]. JavaScript使用 Fetch
[9]. 本文 JS+CSS 參考

---

: 這篇是在大家熟悉 flaskr 的指導專案之後，實現一個圖片上傳和下載的案例...

如果覺得不錯，幫忙點個支援哈～