5. 前后端实现文件上传与解析

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)

结束