1. 說明

在實際開發中，比較常見的一個功能是需要在前端頁面中選擇系統中的某個文件上傳到服務器中進行解析，解析后的文件內容可以用來在服務器中當作參數，或者傳遞給其它組件使用，或者需要存儲到數據庫中。所以本文就提供一種方式來實現這樣的功能。

2. 具體步驟

主要需要完成兩步驟：一是前端實現文件上傳，二是后端實現文件接收與保存
說明：前端框架是vue2，具體框架代碼可以參考前面的系列文章

2.1 前端文件上傳

首先，前端負責文件上傳的控件直接使用input標簽即可，然后在提供一個文件上傳的按鈕，頁面簡單布局代碼如下：

<template><div><input class=“inputfile” type=“file” id=“testuploadfile”><el-button @click=“uploadFile” type=“success” plain></el-button></div>
</template>

之后，就是實現上面為button按鈕綁定的觸發事件uploadFile，具體代碼如下：

async uploadFile()
{//先找到input控件，獲取其上傳的文件const fileInput = document.getElementById(‘testuploadfile’);if(!fileInput.files.length){alert(‘請選擇文件’);return;}//獲取文件const file = fileInput.files[0];if(file){//創建一個表單，用于上傳const formData = new formData();formData.append(‘file’,file);//嘗試調用后端接口進行上傳try{axios.post(‘/api/parseFile’, formData, {headers:{‘Content-Type’:’multiparty/form-data’}}).then(response => {if(response.data.status === ‘success’){alert(‘解析成功’);}else{alert(‘解析失敗’);}});}catch(error){if(axios.isCancel(error)){console.log(‘upload canceled’, error.message);}else{console.log(‘Error upload file:’, error);}}}
}

2.2 后端文件接收

本文中后端設置的對應接口，其功能相對簡單，讀者可以根據自身業務需求在此基礎上進行擴展，比如對接收到的文件內容盡心讀取更改什么的，本文中只是為了實現前后端文件的上傳與接收，所以此處的代碼只時對文件進行了保存，具體代碼如下：

from flask import Flask, request, jsonify
from flask_cors import CORS
from werkzeug.utility import secure_filename
import osapp = Flask(__name__)
CORS(app)@app.route(‘/parseFile’, methods=[‘POST’])
def parseFile():# 使用request接收文件file = request.files[‘file’]	# 注意：這里的名稱‘file’，要和前端formData中填寫的標簽保持一致formData.append(‘file’, file)# 保存文件if file:# 獲取文件名filename = secure_filename(file.filename)# 保存文件到指定路徑file_dir = os.path.join(‘./files/’,’test’)if not os.path.exists(file_dir):os.makedirs(file_dir)file_path = os.path.join(file_dir, filename)file.save(file_path)return jsonify({‘status’:’success’,’message’:’接收文件{filename}成功’,}),200if __name__ == ‘__main__’:app.run(host=‘0.0.0.0’,debug=True)

結束