业务推广网站,wordpress页面修改,网络运维工程师证,阜创汇网站建设名额1. 说明
在实际开发中#xff0c;比较常见的一个功能是需要在前端页面中选择系统中的某个文件上传到服务器中进行解析#xff0c;解析后的文件内容可以用来在服务器中当作参数#xff0c;或者传递给其它组件使用#xff0c;或者需要存储到数据库中。所以本文就提供一种方式…1. 说明
在实际开发中比较常见的一个功能是需要在前端页面中选择系统中的某个文件上传到服务器中进行解析解析后的文件内容可以用来在服务器中当作参数或者传递给其它组件使用或者需要存储到数据库中。所以本文就提供一种方式来实现这样的功能。
2. 具体步骤
主要需要完成两步骤一是前端实现文件上传二是后端实现文件接收与保存 说明前端框架是vue2具体框架代码可以参考前面的系列文章
2.1 前端文件上传
首先前端负责文件上传的控件直接使用input标签即可然后在提供一个文件上传的按钮页面简单布局代码如下
templatedivinput 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’,debugTrue)结束
