基於Flask開發網站 -- 前端Ajax非同步上傳檔案到後臺

Python研究者發表於2021-08-01
Flask網站前端非同步

大家好，我是辰哥~

辰哥最近利用空閒時間在寫一個線上視覺化平臺，過程中也覺得一些技術還是比較有意思的，所以就以模組化的形式分享出來。如：從網頁介面（前端）上傳檔案到伺服器（後端）。

放一下該模組的介面圖瞧一瞧：

點選上傳excel檔案按鈕，選擇excel檔案後可以線上預覽，並且後端接收儲存到伺服器，本文主要是分享上傳檔案這塊內容。

背景：前端是html，後端使用Flask框架，在前端點選上傳一個excel檔案，後端接收並儲存到本地。

01 前端處理

1.檔案選擇框

相信寫過html程式碼的都知道，上傳檔案控制元件最簡單的是html預設的（非使用外掛的情況）

<input id="file"  name="loadfile"  type="file">

檔案選擇框的id是file，型別是file，通過id去呼叫js非同步程式碼，型別是指定input是選擇本地檔案。

這樣就定義好一個檔案選擇框。

2.Ajax非同步處理

在使用Ajax非同步之前，需要引入Jquery檔案

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

非同步程式碼：

$('#file').change(function (e) {
     var files = e.target.files;
     var formFile = new FormData();
     formFile.append("file", files[0]); //加入檔案物件
      $.ajax({
         url: "/upload_file",
         data: formFile,
         type: "post",
         dataType: "json",
         cache: false,//上傳檔案無需快取
         processData: false,//用於對data引數進行序列化處理 這裡必須false
         contentType: false, //必須
         success: function (result) {
             alert("上傳完成!");
         },
     })
});

點選網頁的上傳excel檔案按鈕，選擇好excel檔案之後，自動觸發上述的js程式碼（通過id：file去觸發指定js程式碼）

簡單介紹：

（1）e.target.files：選擇上傳的檔案

（2）FormData：將上傳檔案封裝到FormData中

（3）/upload_file：後端上傳的介面（接收檔案的入口）

這段js程式碼的作用就是將選擇好的excel檔案，上傳到後端介面：/upload_file，後端處理完畢之後返回響應值：result，網頁提示：上傳完成。

02 後端處理

後端使用Python去編寫，用的是Flask框架，如果還不明白的flask的簡單使用的，可以參考辰哥之前的一篇文章：Flask結合ECharts實現線上視覺化效果，超級詳細！

這裡辰哥直接帶大家看後端介面，詳細的完整原始碼，辰哥會在文末直接給出。

# 上傳檔案
@app.route('/upload_file', methods=['POST'])
def upload():
    if request.method == 'POST':
        f = request.files['file']
        basepath = os.path.dirname(__file__)  # 當前檔案所在路徑
        print(f.filename)
        #######################################
        # 毫秒級時間戳
        file_name = str(round(time.time() * 1000))
        dir = str(time.strftime('%y%m%d', time.localtime()))
        upload_path = os.path.join(basepath, 'uploads/'+dir)
        # 判斷資料夾是否存在
        if not os.path.exists(upload_path):
            os.mkdir(upload_path)
        #######################################
        file_path = str(file_name)+str(f.filename)
        f.save(upload_path+"/"+file_path)
    return Response(json.dumps(file_path), mimetype='application/json')

簡單說明：

（1）介面名稱是：/upload_file，接受的請求方式是：post；

（2）request.files['file']：接收上傳的檔案；

（3）6~16行：在upload資料夾下自動建立以當天日期命名的資料夾，作為儲存上傳檔案的儲存路徑；

（4）file_name：是當前毫秒級時間戳，對上傳的檔案重新命名：時間戳+原檔名；

（5）Response返回檔案路徑到前端非同步處理函式success：file_path；

03 效果

前端和後端都處理完畢後，開始除錯程式。看看具體效果。

以上就是前端Ajax非同步上傳檔案到後端的內容。

完整的原始碼地址：

https://wwi.lanzoui.com/imM6bs2f44d

最後說一聲：原創不易，求給個贊!

相關文章