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

Python研究者發表於2021-08-01

大家好,我是辰哥~

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

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

點選上傳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

最後說一聲:原創不易,求給個贊!

相關文章